CSS3 设置模糊背景图片

最新推荐文章于 2024-04-12 15:27:17 发布

俊刚、

最新推荐文章于 2024-04-12 15:27:17 发布

阅读量2.1w

点赞数 1

分类专栏： 2020以前文章标签： css3 filter 模糊背景

本文链接：https://blog.csdn.net/csdn9_14/article/details/53084401

版权

2020以前专栏收录该内容

50 篇文章 0 订阅

订阅专栏

使用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>

效果图：

俊刚、

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS3 设置模糊背景图片

使用方法：-webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px);blur(px)给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不
复制链接

扫一扫