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>之外创建另一个<div class="middlecoversecond">并对其进行模糊处理，同时保持<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>

有没有一种方法可以使背景模糊而不是文本模糊

2 个答案: