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。这codepen Matthew Wilcoxson可能有所帮助。

模糊背景而不重组HTML？

2 个答案: