CSS3提供了一个很好用的属性,可以设置图片背景模糊,让页面变得更加美观和吸引人。
/* 设置背景图片,注意要加上引号 */ body { background-image: url("bg.jpg"); background-size: cover; } /* 设置模糊效果,值越大越模糊 */ .blur { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); }
以上代码中,我们首先通过body标签设置了页面的背景图片,并通过background-size属性来让图片铺满整个页面。
接下来通过定义一个.blur类来设置模糊效果,这里我们使用了CSS3的filter属性,同时考虑了不同浏览器的兼容性,构造了多个不同前缀的属性值。
最后我们只需要将.blur类添加到需要模糊的元素上即可,例如:
这里的内容会被模糊
这样就可以让选定的元素背景模糊起来了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。