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約塞米蒂菜單背景模糊功能於CSS＆源= IU＆PF = M＆冷杉= 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%3B46

問候。

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效果可能更好嗎？

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>

接下來，您必須為將在模糊部分前面的 div 賦予 position 屬性

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