您现在的位置是：网站首页> 编程资料编程资料

CSS设置背景模糊的实现方法CSS设置背景图片模糊内容不模糊的解决方法css3实现背景模糊的三种方式(小结)

2021-09-04 1072人已围观

简介这篇文章主要介绍了CSS设置背景模糊的实现方法,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

在做一些页面的时候，为了让页面更好看，我们常常需要设置一些背景图片，但是，当背景图片太过花哨的时候，又会影响我们的主体内容，所以我们就需要用到 filter 属性来设置他的模糊值。

html代码如下

JS Bin我是需要突出显示的内容

但是如果直接在背景图片上使用的话，

 .cover{ width:600px; height:300px; position:relative; text-align:center; line-height:300px; color:white; background:transparent url(http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) center center no-repeat; filter:blur(5px); background-size:cover; }

可能会造成下面的这种情况。

我们会发现背景和主体内容都变糊了。

解决办法：给背景图片增加一个伪元素，将背景图片和 filter 属性设置在伪元素上，具体代码如下

 .cover{ width:600px; height:300px; position:relative; text-align:center; line-height:300px; color:white; } .cover::before{ content:''; position:absolute; top:0; left:0; width:600px; height:300px; background:transparent url(http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) center center no-repeat; filter:blur(5px); z-index:-1; background-size:cover; }

总结

以上所述是小编给大家介绍的CSS设置背景模糊的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

上一篇：css实现“加号”效果的实例代码纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）CSS3 linear-gradient线性渐变生成加号和减号的方法

下一篇：css实现中间文字两边横线效果 CSS控制文字在一条线中间的方法

您现在的位置是：网站首页> 编程资料编程资料

CSS设置背景模糊的实现方法CSS设置背景图片模糊内容不模糊的解决方法css3实现背景模糊的三种方式(小结)

我是需要突出显示的内容

相关内容

点击排行

本栏推荐

猜你喜欢