没有重组html的模糊背景？答案

【问题标题】：Blurring background without restructuring html?没有重组html的模糊背景？
【发布时间】：2016-04-12 03:36:38
【问题描述】：

我正在尝试将 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;
}

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

【问题讨论】：

标签： html css filter blur

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

虽然这在理论上可以回答问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。如果链接页面发生变化，仅链接的答案可能会变得无效......我也只是回答了这个效果......但你不能模糊背景......只有元素。
是的，你是对的。我现在有点着急。我稍后会编辑它。
你可以这样做，但你只是在重复我已经回答过的内容......这取决于你。