CSS 如何设置模糊距离

CSS（级联样式表）是设计网站视觉效果的强大工具。模糊效果是CSS中的一项功能，可以使用模糊属性对任何元素进行模糊处理。通过使用模糊效果，可以创建柔和、梦幻的效果，或者突出页面上特定的元素。

语法

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.tutorialspoint.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.tutorialspoint.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>