CSS中如何设置模糊距离？-css教程-PHP中文网

CSS中如何设置模糊距离？

WBOY

发布： 2023-09-01 22:37:02

转载

1493 人浏览过

CSS中如何设置模糊距离？

CSS（层叠样式表）是设计网站视觉效果的强大工具。模糊效果是CSS中的众多功能之一，它用于使用模糊来模糊任何元素财产。要创建柔和、梦幻的效果或将注意力吸引到页面上的特定元素，我们可以使用模糊效果。

语法

css element {
   filter : blur (amount)
}

登录后复制

CSS中模糊距离的概念

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

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

要在CSS中设置模糊距离，需要使用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>

登录后复制

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

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>

登录后复制