时间戳

首页 > 解决方案 > 如何使用模糊滤镜使图片作为背景

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

问题描述

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

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

标签： htmlcss

解决方案

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

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

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

推荐阅读