网站上做推广方案,网站名称与域名,佛山现在什么网络推广好,上海关键词排名搜索在开发网页时#xff0c;照片模糊处理会经常被使用#xff0c;比如当我们背景图的模糊#xff0c;当我们不想背景图片过于突出影响美观时#xff0c;就可以设置将照片模糊处理#xff0c;突出文字部分。那么 CSS 如何实现照片模糊呢#xff1f;这篇文章 w3cschool 小编告…在开发网页时照片模糊处理会经常被使用比如当我们背景图的模糊当我们不想背景图片过于突出影响美观时就可以设置将照片模糊处理突出文字部分。那么 CSS 如何实现照片模糊呢这篇文章 w3cschool 小编告诉你。首先让我们先来看下原图让我们再来看下实现效果以上图片肉眼可见的被模糊了而且可以突出文字。其实照片模糊处理的实现十分简单。仅用一个代码样式就可以实现。那就是filter: blur(模糊数值)。当然要实现兼容性的话需要就得使用-webkit-filter: blur(模糊数值)。让我们来看下实现的代码图片模糊 - 编程狮(w3cschool.cn)img {-webkit-filter: blur(3px); /*兼容性*/filter: blur(3px); /*模糊效果*/margin-top: 10px;}h1 {color:#EBEDEF;}.text {position: absolute;top: 30%;left: 50%;transform: translate(-50%, -50%);text-align: center;} w3cschool-编程狮这是一张被模糊的照片以上就是 CSS 如何实现照片模糊的全部内容。更多 CSS 效果实现请关注 w3cschool 官网。
