模糊背景没有重组的HTML？

-1

我想将CSS模糊属性应用于包装div，但不想影响我的文本。对于我使用的框架来说，重构html是相当困难的。有没有办法只将蓝色背景而不是文字？模糊背景没有重组的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; 
}

如果任何人都可以点我到一个解决的方向，如果有，那将不胜感激。

来源

2016-01-07 knocked loose

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

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

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

来源

2016-01-07 16:39:40

这将工作，非常感谢你！ –

尝试使用.wrapper:before和文体的背景，而不是.wrapper。这codepen通过Matthew Wilcoxson可能会有所帮助。

来源

2016-01-07 16:39:58

尽管这可能会在理论上回答这个问题，但在这里包括答案的基本部分，并提供了供参考的链接。[**] [**]（// meta.stackoverflow.com/q/8259）只有链接的答案可能会失效，如果链接的页面发生变化......我也只是回答了这个问题......但是你不能模糊背景......只有元素。 –

是的，你说得对。我现在有点匆忙。我稍后再编辑它。 –

你可以这样做，但你只重复我已经回答的内容......这取决于你。 –

模糊背景没有重组的HTML？

回答

相关问题