不重组就模糊背景html？

Question

我正在尝试将 CSS 模糊属性应用到包装器 div，但不想影响我的文本。使用我正在使用的框架，重组 html 将相当困难。有没有办法只让背景变蓝而不让文字变蓝？

HTML结构

<div class="wrapper">
<h1>Hello World</h1>
</div>

CSS

.wrapper{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background-color:red;
}

如果有人能指出解决方案的方向，如果有的话，我将不胜感激。

Answer 1

可能值得注意的是，您实际上不能模糊背景...只有元素。

所以，pseudo-element 就是答案。

.wrapper {
  position: relative;
}
.wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  background-color: red;
  z-index: -1;
}

<div class="wrapper">
  <h1>Hello World</h1>
</div>

Answer 2

尝试使用 .wrapper:before 并为其背景设置样式而不是 .wrapper。这 codepen by Matthew Wilcoxson 可能会有所帮助。

不重组就模糊背景html？

Blurring background without restructuring html?

html

css

blur

filter