將模糊添加到fancybox而不是黑暗dim

<div class="container is-blur"> 
    <h1>Hello</h1> 
    <p>Background page content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
</div> 

<div class="overlay"> 
    <div class="fancybox"> 
     Your fancy box content 
    </div> 
</div>

CSS

.container { 
    position: relative; 
} 

.container.is-blur { 
    -webkit-filter: blur(5px); 
    filter: blur(5px); 
} 

.content { 
    font-size: 1.5rem; 
    line-height: 2rem; 
} 

.overlay { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: rgba(0,0,0,.5); 
    filter: blur(5px); 
} 

.fancybox { 
    width: 200px; 
    margin: 0 auto; 
    top: 200px; 
    position: relative; 
    background-color: #fff; 
    padding: 30px; 
}

對Lorem ipsum感到抱歉。

注意

CSS 過濾尚未被IE支持。結帳http://caniuse.com/#feat=css-filters

fyi：-ms-filter在IE上不起作用。

對於過濾的進一步探索，檢出MDN文檔 https://developer.mozilla.org/en-US/docs/Web/CSS/filter

來源

2016-06-14 12:13:37 Maneeshpal

這是一個鏈接唯一的答案，請添加一些代碼示例。 –

不知道這一點。你的擔心完全合情合理。更新我的回答 – Maneeshpal

好的，好的信息 - 我會看看這個，回來。謝謝一堆 – Stefan

沒錯這些都是好消息 - 雖然我已經看到了其中的一些，並試圖出來我的細節。真正的問題是將模糊添加到疊加層本身 - png中帶有透明度的圖像。不像這裏的圖像 - 我們想要第二張圖像上的內容（頁面）在磨砂/模糊之後）。我想後面的另一DIV層需要的，但我們不知道如何實現這個..

What we want:)

What we don´t want

享受你的一天所有:)

來源

2016-06-15 07:18:26 Stefan

如果你的覆蓋有一個透明PNG，它可能會模糊。我的代碼示例使用css顏色透明度'rgba（0,0,0，.5）'。在視覺上，我想知道容器（頁面內容）是否模糊或覆蓋是否有任何區別。 – Maneeshpal

感謝您的輸入Maneesphpaal。也許情況就是這樣，雖然很容易嚐到，但我們自然而然地做了很多不同的變化，我相信我們錯過了一些相當簡單的東西:)。我們希望那些熟悉這種有效性的人能夠增加如何使其發揮作用 - 我不明白你的意思是不好意思說什麼。我們正在嘗試添加模糊或磨砂玻璃，而不是上面鏈接中出現的黑色覆蓋層。而已。 – Stefan

將模糊添加到fancybox而不是黑暗dim

回答

相關問題