如何使用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使模糊背景模糊背景？

回答

相关问题