有没有办法模糊背景而不模糊文本

Question

有人知道如何模糊background，但允许文本和按钮保持不模糊吗这也是背景上的一个小盖子，不是背景，所以简单的<p>代码后不会工作

.middlecoversecond{
margin-left: 0%;
margin-right: 0%;
height: 550px;
position: center;
background-color: #dddddd;  
border-style: solid; 
border-width: 3px; 
filter: blur(10px);
}

<div class="middlecoversecond">
<h1>More Stuff2</h1>
<p> Other of this</p>
</div>

Answer 1

将您的样式放到另一个div中，并将宽度和高度设置为div父级的100%我希望它能帮助你

<div>
<div class="backgroundblurinpositionabsolute"></div>
<h1>More Stuff2</h1>
<p> Other of this</p>
</div>

Answer 2

你可以试试这个。但我不确定你的预期结果是什么。我认为在<div class="middlecoversecond">之外创建另一个<div>并模糊它，同时保持<div class="middlecoversecond">不模糊是另一种解决方法。

.middlecoversecond{
margin-left: 0%;
margin-right: 0%;
height: 550px;
position: center;
position: relative;
z-index: 1;
}
.blurred
{
z-index: 0;
border-style: solid; 
border-width: 3px; 
background-color: #dddddd;  
width: 100%;
height: 100%;
filter: blur(10px);
position: absolute;
}

<div class="blurred"></div>
<div class="middlecoversecond">
<h1>More Stuff2</h1>
<p> Other of this</p>
</div>