<div class="row">
<div class="col-lg-3">
<button class="btn">
button
</button>
</div>
.col-lg-3{
background-color:#8CD6EB;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
如果不想模糊按钮,我需要做什么？
解决方法
使用blur或opacity属性时,无法忽略子元素.如果将这些属性之一应用于父元素,它也将自动应用于子元素.
有一个替代解决方案：在父div内创建两个元素 – 一个div用于背景,另一个div用于内容.设置位置：相对于父div和设置位置：absolute;顶：0像素;右：0像素;底部：0像素;左：0像素; (或将高/宽设置为100％)设置为背景的子元素.使用此方法,内容div不会受到背景上的属性的影响.
例：
<div id="parent_div" style="position:relative;height:300px;width:300px;">
<div id="background" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red;filter: blur(3px);z-index:-1;"></div>
<div id="textarea">My Text</div>
</div>
如果您看到背景屏蔽内容,则使用the z-index property发送第二个内容div后面的背景.
