css图片以及背景图片模糊化
为了模糊化图片，你可以使用CSS的filter属性。对于背景图片，你可以使用background-filter属性（目前是一个实验性特性，但在某些浏览器中可能可用）。对于直接在HTML中的<img>标签的图片，你可以直接使用filter属性。
以下是一个简单的例子，演示如何模糊化图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模糊化图片示例</title>
<style>
.blur-img {
filter: blur(5px);
}
.blur-bg {
background-image: url('example.jpg');
background-size: cover;
background-position: center;
/* 注意：background-filter 是实验性特性 */
background-filter: blur(5px);
}
</style>
</head>
<body>
<div class="blur-img">
<img src="example.jpg" alt="模糊效果的图片">
</div>
<div class="blur-bg">
<div class="content">背景模糊化</div>
</div>
</body>
</html>在这个例子中，.blur-img 类使用 filter 属性模糊化 <img> 标签中的图片，而 .blur-bg 类使用 background-filter 属性模糊化背景图片。注意，background-filter 的兼容性可能不如 filter 属性广泛，因此在使用时请考虑浏览器的兼容性。
评论已关闭