CSS3 设置模糊背景图片

2017-01-13 10:51:29来源:csdn作者:csdn9_14人点击


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


使用方法:


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







blur(px)

给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。


<!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>

效果图:



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台