成都网站建设设计

将想法与焦点和您一起共享

css如何虚化背景图片

这篇文章给大家分享的是有关css如何虚化背景图片的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

成都创新互联公司从2013年成立,是专业互联网技术服务公司,拥有项目成都网站制作、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元进贤做网站,已为上家服务,为进贤各地企业和个人服务,联系电话:18980820575

在虚化背景时使用的是filter属性,我们就是利用filter属性中blur来设置虚化背景的。

代码如下:







girl

css虚化背景

上述这个方法只是简单的利用css将背景图片虚化,下面我们来看看稍微复杂一点的方法,当然也是利用filter属性

代码如下:







图片上面的文字内容

背景图片虚化

说明:上述代码主要就是将要设置虚化背景的地方通过伪元素设置背景颜色或图片,利用区域relative定位和伪元素absolute定位这样才能让伪元素的大小完全等于本来区域的大小,然后用blur滤镜进行虚化处理,就会想上面的效果那样。

感谢各位的阅读!关于css如何虚化背景图片就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


分享文章:css如何虚化背景图片
本文地址:http://chengdu.cdxwcx.cn/article/ihdesp.html