<分区>
<分区>
我想在我的网站上使用一张图片作为带有模糊滤镜的背景。
我尝试在 css 文件中使用它:
.bg-image{
background-image: url("../store/groupLK.jpg");
filter: blur(8px);
-webkit-filter: blur(8px);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
在 html 文件中:
<head>
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
</head>
<body>
<div class="bg-image">
/* the rest of the code including some other images */
</div>
</body>
它似乎有效，但它模糊了我使用的所有图像，而不仅仅是“groupLK.jpg”。我还尝试在其他图片之前/之后使用 bg-image 类，但它只出现在该位置，而不出现在网站的其余部分。提前谢谢你。
最佳答案
发生这种情况是因为模糊滤镜应用于父级，因此也会影响其所有子级。
您可以将图像和文本(或其他图像)包裹在一个容器中:
.bg-image{
height: 200px;
width: 200px;
background-image: url("https://dummyimage.com/200x200");
filter: blur(2px);
position: absolute;
top: 0;
left: 0;
}
.text{
position: absolute;
top: 0;
left: 0;
}<div class="container">
<div class="bg-image">
</div>
<div class="text">
Hallo
</div>
</div>关于html - 如何使用模糊滤镜使图片作为背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56199486/