数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 CSS 中设置模糊距离？
CSS（层叠样式表）是用于设计网站视觉效果的强大工具。模糊效果是 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://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://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>
结论
在 CSS 中设置模糊距离是为网页添加视觉吸引力的简单有效的方法。您可以借助以下示例轻松地在网页上创建模糊效果。
261 次查看
