如何在 CSS 中设置模糊距离?

cssweb developmentfront end technology更新于 2024/3/22 9:16:17

CSS(层叠样式表)是设计网站视觉效果的强大工具。blur 效果是 CSS 的众多功能之一，它使用 blur 属性对任何元素进行模糊处理。为了创建柔和、梦幻的效果，或将注意力吸引到页面上的特定元素，我们可以使用模糊效果。

语法

css element {
   filter : blur (amount)
}

CSS 中模糊距离的概念

在讨论设置模糊距离的实际方面之前，了解模糊距离的概念非常重要。应用于元素的模糊量称为模糊距离。此值可以用像素 (px)、em 或其他 CSS 单位来定义。

如何使用"blur"属性在 CSS 中应用模糊距离

要在 CSS 中设置模糊距离，请使用 blur 属性。"blur"属性设置应应用于元素的模糊量。要使用"blur"属性，我们首先选择要应用模糊效果的元素，然后将"blur"属性设置为所需的值。

例如，要对图像应用模糊效果，我们可以使用以下CSS代码 -

img {
    filter : blur(5px)
}

在这里，我们选择了"img"元素，并对其应用了5像素的模糊效果。

示例1

以下是上述方法的完整代码示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      img {
         filter: blur(3px);
      }
   </style>
</head>
<body>
   <h3>Applying blur distance in CSS using the 'blur' property</h3>
   <img src="https://www.cainiaomax.com/dip/images/einstein.jpg" alt="My Image">
</body>

我们可以对网页中的不同元素应用不同的模糊距离。为此，我们可以分别选择每个元素，并将"blur"属性设置为所需的值。例如 -

h1 {
   filter : blur(3px)
}

img {
   filter : blur(5px)
}

这里，我们选择了两个元素，第一个是"h1"，第二个是"img"，并分别应用了 3 像素和 5 像素的模糊效果。

示例 2:对不同的元素应用不同的模糊距离

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      p{
         filter: blur(2px);
         font-size: 20px;
         color: red;
      }
      img {
         filter: blur(3px);
      }
   </style>
</head>
<body>
   <h3>Applying blur distance in CSS using the 'blur' property</h3>
   <p>Applied blur distance 2 pixels in CSS using the 'blur' property</p>
   <img src="https://www.cainiaomax.com/dip/images/einstein.jpg" alt="My Image">
</body>
</html>

在 CSS 中创建带模糊距离的焦点效果

创建焦点效果是 CSS 中模糊效果最常见的用法。此效果是通过对网页上除获得焦点的元素之外的所有元素应用模糊效果来实现的。

要在 CSS 中创建带模糊距离的焦点效果，需要将"blur"属性与":not"伪类结合使用。":not"伪类允许用户选择除特定元素之外的所有元素。例如 -

.blur * {
   transition: all 0.5s ease-in-out;
}

.blur:hover *:not(.no-blur) {
   filter: blur(5px);
}

此处，当用户将鼠标悬停在"blur"类上时，我们将"blur"属性应用于所有"blur"类的子元素。此效果不适用于"no-blur"类的元素，因为使用"no"伪类会将"no-blur"类的元素排除在模糊效果之外。

示例 3

以下是上述方法的完整代码示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      .blur * {
         transition: all 0.5s ease-in-out;
      }
      .blur:hover *:not(.no-blur) {
         filter: blur(5px);
      }
   </style>
</head>
<body>
   <h2>Creating a focus effect with blur distance in CSS</h2>
   <p> Hover over the below content to see the effect </p>
   <div class="blur">
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <button class="no-blur">Click me</button>
   </div>
</body>
</html>