简单的CSS实现毛玻璃效果

  • 实测图

  • 示例代码
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>简单的css实现毛玻璃效果</title>
	</head>

	<body>
		<style type="text/css">
			.blur {
				filter: url(blur.svg#blur);
				/* FireFox, Chrome, Opera */
				-webkit-filter: blur(10px);
				/* Chrome, Opera */
				-moz-filter: blur(10px);
				-ms-filter: blur(10px);
				filter: blur(10px);
				filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
				/* IE6~IE9 */
			}
		</style>
		<img src="img/20180325074639843.jpg" />
		<img src="img/20180325074639843.jpg" class="blur" />
	</body>
</html>

 

本站出售的源码只允许用于合法用途,以及学习交流技术层面,凡是用于非法用途的与本站无关,本人不承担任何责任!未经本站允许不得转载、倒卖:惊鸿 » 简单的CSS实现毛玻璃效果
分享到:
赞(0)

评论抢沙发

评论前必须登录!

Hello,欢迎来咨询~