1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > CSS3 设置模糊背景图片

CSS3 设置模糊背景图片

时间:2024-05-28 23:20:05

相关推荐

CSS3 设置模糊背景图片

使用filter()函数实现模糊背景

使用方法:

-webkit-filter: blur(5px); /* Chrome, Safari, Opera */

filter: blur(5px);

<!DOCTYPE html><html><head><style>.img1 {-webkit-filter: blur(5px); /* Chrome, Safari, Opera */filter: blur(5px);}.content{position:absolute;width:300px;height:80px;top:160px;background-color:#ddd;opacity:0.5;text-align:right;}.img2{position:absolute;left:50px;top:150px;}</style></head><body><p>图片使用高斯模糊效果:</p><img src="img/bg_1.jpg" alt="Pineapple" width="300" height="300" class="img1"><div class="content"><p><b>前端虐我千百遍</b></p><p><b>我待前端如初恋</b></p></div><img src="img/bg_1.jpg" width="100" height="100" class="img2"><p><strong>注意:</strong> Internet Explorer 不支持 filter 属性。</p></body></html>

效果图:

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