数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 HTML 和 CSS 将图像转换为模糊效果
一般来说，模糊是人眼的一种视觉效果，当观看者无法清晰地看到物体的细节时就会发生。
在 HTML 中，我们可以使用 CSS 属性将模糊效果应用于网页上的元素（例如图像）。为此，我们使用filter属性以及blur()函数。此函数对图像元素应用高斯模糊效果，使其更柔和，定义更少。
语法
以下是filter属性与blur()函数的语法：
filter: blur(radius);
此函数接受一个参数（即半径），该参数以像素为单位指定模糊效果的半径。
示例
在以下示例中，我们获取一个图像并向其添加 3px 模糊效果：
<html>
<head>
<title>Convert an image into Blur using HTML/CSS</title>
<style>
img {
filter: blur(3px);
-webkit-filter: blur(3px);
height: 75%;
width: 75%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 70px;
margin-bottom: 70px;
}
</style>
</head>
<body>
<img src="https://tutorialspoint.com/images/logo.png?v2" alt="Beach image">
</body>
</html>
正如我们在输出中看到的，图像变得模糊了。
示例
在这里，我们将图像作为背景图像并向其添加了 3px 模糊效果。此外，我们在背景图像顶部添加了文本。
<html>
<head>
<title>Convert an image into Blur using HTML/CSS</title>
<style>
/*CSS of the Background image*/
img {
filter: blur(3px);
-webkit-filter: blur(3px);
height: 100%;
width: 100%;
}
/*CSS of the text*/
.text {
background-color: rgba(0, 0, 0, 0.6);
color: white;
font-family: Georgia, 'Times New Roman', Times, serif;
border: 3px solid whitesmoke;
border-radius: 100px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="background-image">
<img src="https://tutorialspoint.com/images/logo.png?v2" alt="Background image">
</div>
<div class="text">
<h3>Visakhapatnam: The city of destiny</h3>
</div>
</body>
</html>
示例
在下面的示例中，我们将原始图像放置在模糊背景图像的中心。
<html>
<head>
<title>Convert an image into Blur using HTML/CSS</title>
<style>
/*CSS of the Background image*/
.background-image img {
filter: blur(3px);
-webkit-filter: blur(3px);
height: 100%;
width: 100%;
}
/*CSS of the front image div*/
.front-image {
width: 600px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*CSS of front image*/
.front-image img {
width: 100%;
height: 100%;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="background-image">
<img src="https://tutorialspoint.com/images/computer_concepts_icon.svg" alt="Background image">
</div>
<div class="front-image">
<img src="https://tutorialspoint.com/images/logo.png?v2" alt="beach image">
</div>
</body>
</html>
更新于：2023-09-07
1K+ 次查看
广告