使用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>
效果图: