900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > CSS3滤镜filter: blur 使图片或背景模糊(毛玻璃)

CSS3滤镜filter: blur 使图片或背景模糊(毛玻璃)

时间:2020-02-23 06:07:19

相关推荐

CSS3滤镜filter: blur 使图片或背景模糊(毛玻璃)

CSS毛玻璃效果可以通过filter: blur()实现,类似PS高斯模糊,图片和背景都可以使用;但在移动端,会造成卡顿,不建议在移动端使用;

CSS:

.blur{-webkit-filter: blur(5px);-moz-filter: blur(5px);-o-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px); }.jay{width: 300px;height: 180px;}.bg{background: url(img/jay.jpg);background-size: cover;background-position: center;}

HTML:

<!--背景模糊--><div class="jay bg blur"></div><!--原图--><div class="jay bg"></div><!--图片模糊--><div class="jay"><img src="img/jay.jpg" class="blur" width="300"/></div>

效果如图(图片来自百度/周杰伦)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。