模糊絕對定位div以隱藏僅使用CSS3背後的內容

-1

我正在創建一個模式彈出窗口，提醒用戶以及頁面上的疊加層。模糊絕對定位div以隱藏僅使用CSS3背後的內容

我試圖讓背景變得模糊（因此頁面上的內容被遮擋了），但模式彈出式菜單很明顯。

下面是一個例子，模態在數秒後消失。我已將filter: blur應用於.modal-newsletter-wrap這是在整個頁面上佔滿的包裝。我的本意是，網頁上的文字和貓的圖像會模糊不清，但他們仍然脆：http://codepen.io/anon/pen/Ggzxdz

此外，儘管在內部DIV .modal-newsletter它仍然繼承了包裝div的模糊有filter: blur(0);集。

.modal-newsletter-wrap { 
    background-color:rgba(243,243,232,0.5); 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
} 

.modal-newsletter{ 
    -webkit-filter: blur(0); 
    -moz-filter: blur(0); 
    -o-filter: blur(0); 
    -ms-filter: blur(0); 
    filter: blur(0); 
}

來源

2015-03-25 Francesca

你需要這樣的http://codepen.io/kiranm/pen/Ggzxba？ – 2015-03-25 12:06:17

@ K.B.M內容應該在模態彈出窗口淡入的同時淡入並模糊。 – Francesca 2015-03-25 12:08:04

快速評論：'-o-filter'和'-moz-filter'永遠不會存在，永遠不會。從Presto切換到Blink後，Opera只支持過濾器（所以'-webkit-'前綴，而不是'-o-'）。 Firefox一直支持它們，前提是幾個版本都沒有前綴，但是從不使用'-moz-'前綴。 IE目前還不支持它們，但是當它們被支持時，它們不太可能需要一個前綴。所以，除了沒有前綴的版本之外，你可以安全地使用'-webkit'前綴版本。 – Ana 2015-03-25 15:19:03

.modal-newsletter是.modal-newsletter-wrap孩子，所以，如果你對.modal-newsletter-wrap設置模糊濾鏡它會的，當然適用於.modal-newsletter，不管你的子元素.modal-newsletter上設置blur(0)。

你可以設置模糊<p><p>，它現在包含你的頁面主體（包括貓和所有的東西），所以模糊不會進入模式彈出。

See this codepen，您需要在模式打開時使用javascript設置模糊內容的樣式。

另一種解決辦法是把頁面，這是不realted到（不是父） .modal-newsletter-wrap上的覆蓋，並添加模糊處理它。像 this

來源

2015-03-25 12:06:36

謝謝，我希望有另一種解決方案，但似乎不是。這也是我最初的想法。 – Francesca 2015-03-25 12:10:05

包裹除了在一個共同的父元素（例如一個<main>元件）覆蓋所有內容然後在5秒鐘

http://codepen.io/anon/pen/EarEzo

@-webkit-keyframes blur { 
    0% { -webkit-filter: blur(0px); } 
    100% { -webkit-filter: blur(5px); } 
} 
@-moz-keyframes blur { 
    0% { -moz-filter: blur(0px); } 
    100% { -moz-filter: blur(5px); } 
} 
@keyframes blur { 
    0% { filter: blur(0px); } 
    100% { filter: blur(5px); } 
} 

main { 
    -webkit-animation: blur 1s linear 5s 1 forwards; 
    -moz-animation: blur 1s linear 5s 1 forwards; 
    animation: blur 1s linear 5s 1 forwards; 
}

在本例中後運行一個模糊動畫http://codepen.io/anon/pen/gbqeVV我也通過CSS :target僞類激活了關閉操作。如果疊加元素是內容包裝的兄弟姐妹，那麼你可以改變的「關閉」標籤到鏈接作爲例子，再加入這種風格

#close-layer:target { 
    display: none; 
} 

#close-layer:target ~ main { 
    -webkit-animation: none; 
    -moz-animation: none; 
    animation: none; 

    -webkit-filter: blur(0); 
    -moz-filter: blur(0); 
    filter: blur(0); 
}

同樣的效果可以不設置的散列表也可以實現，例如使用隱藏複選框和:checked僞類：http://codepen.io/anon/pen/XJOqJV

#closeoverlay { display: none; } 

#closeoverlay:checked ~ .modal-newsletter-wrap { 
    display: none; 
} 


#closeoverlay:checked ~ main { 
    -webkit-animation: none; 
    -moz-animation: none; 
    animation: none; 

    -webkit-filter: blur(0); 
    -moz-filter: blur(0); 
    filter: blur(0); 
}

來源

2015-03-25 12:06:43 fcalderan

模糊絕對定位div以隱藏僅使用CSS3背後的內容

回答

相關問題