html - z-index 不适用于模糊效果

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);

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

你需要这样的结构来避免来自 A 的影响:

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

使用 box-shadow 来实现 blur 效果可能更好？