Question

假设我有一个类似

的结构

 <div class=A>
     <div class=B>
         <dialog/>
     </div>
 </div>

现在我想在A上应用模糊效果一旦我打开对话框我可以使用不透明度来查看模糊背后的所有内容并实现Mac不透明度窗口效果。所以，到目前为止我做的是

 .B {
    opacity: 0.9;
    padding: 20px;
    position: relative;
    z-index: 5;
}

 .A{
    -webkit-filter: blur(7px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
    z-index: 1;
}

正如你所看到的那样，我给B提供了更多的z-index超过A而我正在设置不透明度以查看A的模糊效果。

但到目前为止还没有很好的结果。一切都很模糊，因此z-index无法正常工作。

知道我做错了吗？

我希望实现将A置于模糊状态并使对话框清晰但放置一些不透明度。这是我正在寻找的效果

https://www.google.es/search?q=css+yosemite+blur&espv=2&biw=1879&bih=962&tbm=isch&imgil=14cZk2cOQ2jrcM%253A%253BQJGhokVSp1ACMM%253Bhttp%25253A%25252F%25252Fstackoverflow.com%25252Fquestions%25252F25090012%25252Fos-x-yosemite-menu-background-blur-in-css&source=iu&pf=m&fir=14cZk2cOQ2jrcM%253A%252CQJGhokVSp1ACMM%252C_&usg=__kfibV3Ck2ZbNQJ6GLEoNrGET1Cg%3D&ved=0CFQQyjc&ei=j2BMVYncKcvwUq_jgOAI#imgrc=14cZk2cOQ2jrcM%253A%3BQJGhokVSp1ACMM%3Bhttp%253A%252F%252Fi.stack.imgur.com%252F4sBMR.png%3Bhttp%253A%252F%252Fstackoverflow.com%252Fquestions%252F25090012%252Fos-x-yosemite-menu-background-blur-in-css%3B788%3B468

问候。

Answer 1

-webkit-filter: blur(7px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);

过滤器是一个继承的属性，也会影响A的内容。

您需要这样的结构以避免来自A：

的效果

<div class=A></div>
<div class=B>
    <dialog/>
</div>

最好将box-shadow用于blur效果？

Answer 2

使用@Manoz jsfiddle我实现了你想要的。

但你需要改变结构。就像之前的回答告诉你的那样。唯一的区别是我在.A添加了绝对位置，因此它位于.B

下面

.B {
    opacity: 0.9;
    padding: 20px;
    position: relative;
    z-index: 5;
    background:white;
    height:250px;
    width:250px;
}
.A {
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
    background:blue;
    z-index: 1;
    height:250px;
    width:250px;
    position: absolute;
}

<div>
    <div class=A>
        
    </div>
    <div  class=B>
         <h2>SAMPLE</h2>
    </div>
</div>

如果需要，可以为文本添加不透明度。相应调整。

编辑1：

所以你想保持相同的结构..然后在这里：

.B {
    opacity: 0.9;
    padding: 20px;
    z-index: 5;
    background:white;
    height:250px;
    width:250px;
    position: relative;
}

.A:before {
    content: '';
    display: block;
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
    background:blue;
    z-index: 1;
    height:250px;
    width:250px;
    position: absolute;
    top:0 ;
}

<div class="A">
     <div class="B">
         <h2>SAMPLE</h2>
     </div>
 </div>

您可以相应地调整:before的大小。

Answer 3

您需要做的第一件事是将两个div分开


 <div class="A">
 </div>
     <div class="B">
     </div>

接下来，您必须将position属性赋予将位于模糊部分前面的div

.B {
position: absolute;
}

Answer 4

.main-wrapper {
  position: relative; /* It must be given to parent element */
  width: 300px; /* setting width as 300px */
  height: 300px; /* setting height as 300px */
}

.A {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex; /* to center the box */
  align-items: center; /* to make vertically center */
  justify-content: center; /* to make horizontally center */
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px); /* blurs at 1px */
  background: url('https://via.placeholder.com/300'); /* setting dummy image at background */
}

.B {
  opacity: 0.9;
}

<div class="main-wrapper">
  <div class="A">
    <div class="B">
      Dummy text
    </div>
 </div>
</div>

z-index不适用于模糊效果

4 个答案:

编辑1：