模糊的背景而不重构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

也许值得注意的是，您实际上无法模糊背景。。。仅元素。

所以，一个伪元素就是答案。

.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。Matthew Wilcoxson的这个代码笔可能会有所帮助。