如何使用Twitter Bootstrap使模糊背景模糊背景？

引導程序在顯示模態對話框時使用中斷。我如何在整個背景上製作模糊效果？如何使用Twitter Bootstrap使模糊背景模糊背景？

2013-10-24 eugenes

您需要首先更改文檔的結構。它應該是這個樣子

<body> 
    <div class="supreme-container">all your content goes here except for the modal</div> 
    <div id="myModal" class="modal fade">This is your modal.</div> 
</body>

然後在CSS

body.modal-open .supreme-container{ 
    -webkit-filter: blur(1px); 
    -moz-filter: blur(1px); 
    -o-filter: blur(1px); 
    -ms-filter: blur(1px); 
    filter: blur(1px); 
}

來源

2013-10-24 17:33:33 lucian

但在MSIE 9和Firefox中不起作用。 – eugenes

有一種方法可以使其在IE和Firefox中工作詳細[這裏]（http://stackoverflow.com/a/15813429/1563940）。不過，我不確定它是否有效。 – lucian

如果容器內的模態？ – lifecom

我認爲實現這一目標的最簡單的方法是將一個blur類適用於使用jQuery當模式是開放的背景元素。刪除blur當模式被關閉......

.blur { 
    box-shadow: 0px 0px 20px 20px rgba(255,255,255,1); 
    text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9); 
    transform: scale(0.9); 
    opacity: 0.6; 
}

http://bootply.com/74705

來源

2013-10-24 17:41:14 ZimSystem

如果你正在使用的自舉那麼你的內容已經在某種容器。所以這適用於我而不需要改變HTML或任何額外的JS：

.modal-open .container-fluid, .modal-open .container { 
    -webkit-filter: blur(5px) grayscale(90%); 
}

來源

2016-06-17 11:50:45

這是最好的解決方案。 –

這是我尋找的效果！謝啦！ –

我試過這個，但並沒有真正做到這一點（我正在使用React和React Bootstrap）。我根據你的回答所做的工作，併爲我工作： 'body.modal-open #root {-webkit-filter：blur（5px）greyscale（90％）; }' –

如何使用Twitter Bootstrap使模糊背景模糊背景？

回答

相關問題