css3模糊样式,div背景模糊

　　不，让我们进入正题。

　　一般背景模糊效果如下：

　　使用属性：

　　Filter:(2px)

普通背景模糊

　　为了美观，不能模糊背景前面的文字，Filter属性会让这个整个div的后代出现白边。也就是说达不到这个效果。我该怎么办？我们可以使用伪元素，这样也可以顺便解决白边的问题。

　　实施思路：

　　在父容器中设置背景，使用相对定位方便伪元素重叠。但在：after中，只需要继承背景，设置模糊，绝对定位覆盖父元素。这样，父容器中的子元素就不会受到二义性的影响。因为伪元素的多义性不能被父元素的子元素继承。

　　说了这么多，还是来点代码提神吧。

　　简单的html布局：

　　div class= BG div class= drag like窗口/div/divcss:

　　/*背景模糊*/。bg{宽度：100%；身高：100%；位置：相对；背景：url(./image/banner/banner.jpg )不重复修复；填充：1px框大小：边框-框；z指数：1；}.背景：在{内容： 之后；宽度：100%；身高：100%；位置：绝对；左：0；top:0；背景：继承；滤镜：模糊(2px)；z指数：2；}.拖动{ position:absolute；左：50%；top:50%；transform: translate(-50%，-50%)；宽度：200px高度：200px文本对齐：居中；z指数：11；}当然，看了上面的代码，可以发现父容器下的子元素也需要使用绝对定位，但这不会影响后面的布局，请放心使用(有问题可以找博主麻烦~)。需要注意的是，要使用z-index确定层次关系，需要确保子元素(也就是拖到这里)在顶层。否则，子元素的文本将不会出现。

　　上面的代码也有保证div居中的方法。细心的同学应该注意到了！这应该是一种不使用flex布局的相对简单的居中方式。

　　那么这样写代码表现出来的效果是怎么样的呢？

背景局部模糊

　　相比之前的效果，局部模糊背景更简单。这时候父元素根本不需要把伪元素设置成fuzzy。直接类比上面的代码会模糊子元素，但是子元素的后代可能不会模糊(注意解决方法和前面效果描述的一样)。

　　HTML的布局略有变化：

　　class= BG div class= drag div like window/div/div CSS代码如下：(请注意比较)

　　/*背景部分模糊*/。bg{宽度：100%；身高：100%；背景：url(./image/banner/banner.jpg )不重复修复；填充：1px框大小：边框-框；z指数：1；}.拖动{ margin:100px auto；宽度：200px高度：200px背景：继承；位置：相对；}.拖动div{宽度：100%；身高：100%；文本对齐：居中；行高：200像素；位置：绝对；左：0；top:0；z指数：11；}.拖动：在{ content:“”之后；宽度：100%；身高：100%；位置：绝对；左：0；top:0；背景：继承；滤镜：模糊(15px)；/*为了让模糊更明显，把模糊调大*/z-index:2；}效果如下：

背景局部清晰

　　背景部分清晰。这个效果不简单也不好说。关键是应用background:inherit属性。你不能用transform在这里垂直居中。让我们选择灵活布局。如果此处再次使用transform属性，背景也将发生偏移。所以没有局部明确的效果。

　　html布局保持不变，

　　看看css的变化：

　　/*背景局部清晰*/.血糖宽度：100%;身高：100%;位置：相对；背景：url(./image/banner/banner . jpg’)不重复修复；填充：1px框大小：边框-框；}.背景：在{内容： 之后；宽度：100%;身高：100%;位置：绝对；左：0;top:0；背景：继承；滤镜：模糊(3px)；z指数：1;}.拖动{位置：绝对；左：40%;top:30%；/*transform: translate(-50%，-50%)；*/宽度：200像素高度：200像素文本对齐：居中；背景：继承；z指数：11;方框阴影：0 0 10px 6px rgba(0，0，0，5);}效果展示：

　　到此这篇关于CSS3实现模糊背景的三种效果示例的文章就介绍到这了，更多相关CSS3模糊背景内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。