html – 如何模糊(css)div没有模糊的子元素

概述<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

<div ><div >    <button >         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);}

如果不想模糊按钮,我需要做什么？

http://jsfiddle.net/L8ksa46g/

解决方法 使用blur或opacity属性时,无法忽略子元素.如果将这些属性之一应用于父元素,它也将自动应用于子元素.

有一个替代解决方案：在父div内创建两个元素 – 一个div用于背景,另一个div用于内容.设置位置：相对于父div和设置位置：absolute;顶：0像素;右：0像素;底部：0像素;左：0像素; (或将高/宽设置为100％)设置为背景的子元素.使用此方法,内容div不会受到背景上的属性的影响.

例：

<div ID="parent_div" >    <div ID="background" ></div>    <div ID="textarea">My Text</div></div>

如果您看到背景屏蔽内容,则使用the z-index property发送第二个内容div后面的背景.

总结

以上是内存溢出为你收集整理的html – 如何模糊(css)div没有模糊的子元素全部内容，希望文章能够帮你解决html – 如何模糊(css)div没有模糊的子元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。