数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 CSS 滤镜创建模糊图片或文字
用户发现带有模糊背景的网站在视觉上看起来很美观。但是您是否想过这种模糊效果是如何实现的呢？其实很简单。让我们看看如何使用 CSS 背景的模糊属性来实现它。使用 CSS 滤镜在图像或文本上生成模糊效果是常见的网页开发方法，可以提高视觉吸引力或实现某些设计风格。CSS 滤镜可以改变网页上项目的渲染方式，包括模糊效果。
在图像上使用 CSS 滤镜：blur() 属性时，需要对模糊半径进行必要的调整。例如，filter: blur(6px);。使用相同的属性可以获得文本的模糊效果。这些简单的方法可以通过突出显示重要组件来改善网页的外观。尝试不同的模糊设置，以获得适合您设计的理想平衡。
filter 属性的 blur 函数会为源图像添加高斯模糊。半径决定了高斯函数的标准偏差大小，或者屏幕上多少像素混合在一起。如果未提供参数，则使用值 0。尽管参数提供了 CSS 长度，但不允许使用百分比值。
示例
让我们看下面的示例，我们将使用带有效果的模糊文本
<!DOCTYPE html>
<html>
<head>
<style>
#tp {
display: inline-block;
padding: 10px 20px;
margin: 10px auto;
letter-spacing: 3px;
background-color: #A569BD;
}
#tp span:nth-child(1) {
color: #FBFCFC;
font-size: 32px;
font-family: verdana;
}
#tp span:nth-child(2) {
color: #FBFCFC;
text-shadow: 0 0 4px #fff;
font-size: 33px;
font-family: verdana;
}
#tp span:nth-child(3) {
color: #FBFCFC;
text-shadow: 0 0 5px #fff;
font-size: 34px;
font-family: verdana;
}
#tp span:nth-child(4) {
color: #FBFCFC;
text-shadow: 0 0 6px #fff;
font-size: 35px;
font-family: verdana;
}
#tp span:nth-child(5) {
color: #FBFCFC;
text-shadow: 0 0 10px #fff;
font-size: 40px;
font-family: verdana;
}
</style>
</head>
<body>
<div id="tp">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
</div>
</body>
</html>
运行以上代码后，它将生成一个输出，其中包含在网页上带有某些模糊效果的文本。
使用 filter 属性
您可以通过更改元素内容的渲染方式来应用视觉效果和转换，从而使用CSS filter 属性。您可以使用此属性通过修改元素的颜色、亮度、对比度、模糊度和其他特性来更改元素的外观。您可以将 filter 属性与其他 HTML 组件以及图像一起使用。
语法
以下是 CSS filter 属性的语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
示例
以下是一个示例，我们将使用 filter 属性创建模糊图像。
<!DOCTYPE html>
<html>
<head>
<style>
#tp {
filter: blur(3px);
}
body {
text-align: center;
background-color: #E8DAEF;
}
</style>
</head>
<body>
<div id="tp">
<img src="https://tutorialspoint.com/cg/images/logo.png">
</div>
</body>
</html>
运行以上代码后，将弹出输出窗口，在网页上显示模糊图像。
使用 text-shadow 属性
CSS text-shadow 是一个属性，它将为文本添加阴影。该属性将接受可以应用于文本的阴影列表。它也可以进行动画处理，这是一个重要的功能，因为它可以使您的网站在视觉上更具吸引力。
语法
以下是 CSS text-shadow 属性的语法：
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
示例
在下面的示例中，我们将使用 text-shadow 属性创建模糊文本。
<!DOCTYPE html>
<html>
<head>
<style>
#tp {
font-size: 45px;
font-family: verdana;
color: transparent;
text-shadow: 0 0 9px #DE3163;
}
body {
text-align: center;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<div id="tp">TUTOIALSPOINT</div>
</body>
</html>
运行以上代码后，它将生成一个输出，其中包含在网页上显示的模糊文本。
251 次浏览
