极客笔记使用HTML和CSS将图像转换为模糊效果
一般来说，模糊是人眼的一种视觉效果，当观察者无法清晰地看到物体的细节时出现。
在HTML中，我们可以使用CSS属性将模糊效果应用于网页上的元素（如图像）。为此，我们使用 filter属性 与blur()函数。该函数将高斯模糊效果应用于图像元素，使其更加柔和和不清晰。
语法
下面是使用 filter属性 和 blur()函数的语法：
filter: blur(radius);
这个函数接受一个参数（即半径），该参数指定了以像素为单位的模糊效果半径。
示例
在下面的示例中，我们正在获取一张图像，并向其添加一个3像素的模糊效果 –
<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://www.tutorialspoint.com/images/logo.png?v2" alt="Beach image">
</body>
</html>
正如我们在输出中看到的那样，图像被模糊了。
示例
在这里，我们将图像设置为背景图像，并对其添加了3像素的模糊效果。除此之外，我们还在背景图像的上方添加了文字。
<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://www.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://www.tutorialspoint.com/images/computer_concepts_icon.svg" alt="Background image">
</div>
<div class="front-image">
<img src="https://www.tutorialspoint.com/images/logo.png?v2" alt="beach image">
</div>
</body>
</html>