Question

我想将网站上的图片用作带有模糊滤镜的背景。

我尝试在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类，但它仅出现在该位置，而不出现在网站的其余部分。预先谢谢你。

Answer 1

之所以发生这种情况，是因为将模糊滤镜应用于父级，因此也会影响其所有子级。

您可以将图像和文本（或其他图像）包装在容器中

.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>

如何使用模糊滤镜使图片作为背景工作

1 个答案: