毛玻璃效果

最新推荐文章于 2022-11-16 00:33:26 发布

姜无忧

最新推荐文章于 2022-11-16 00:33:26 发布

阅读量611

点赞数 1

分类专栏： html/css/css3

本文链接：https://blog.csdn.net/xiasohuai/article/details/105366292

版权

html/css/css3 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

其实毛玻璃的模糊效果技术只是用到了 css 滤镜（filter）中的 blur 属性

html

<body>
    <div class="content">
		<div class="info">
            <p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜（filter）中的 blur 属性</p>
            <p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜（filter）中的 blur 属性</p>
            <p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜（filter）中的 blur 属性</p>
            <p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜（filter）中的 blur 属性</p>
            <p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜（filter）中的 blur 属性</p>
            <p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜（filter）中的 blur 属性</p>
            <p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜（filter）中的 blur 属性</p>
        </div>
	</div>
</body>

css


body {
    background:url('./mbl.jpg') center center / cover no-repeat fixed;
}
.content {
	height: 400px;
	width: 600px;
	word-break: break-all;
	z-index: 10;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px; 
	margin-left: -300px;
	overflow: hidden;
}

.content:before {
	content: '';
	background:url('./mbl.jpg') center center / cover no-repeat fixed;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
	margin: -30px;
}
.info {
	padding: 40px;
	color: #fff;
}

效果图：

姜无忧

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
毛玻璃效果

其实毛玻璃的模糊效果技术只是用到了 css 滤镜（filter）中的 blur 属性html<body> <div class="content"> <div class="info"> <p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜（filter）中的 blur 属性</p> ...
复制链接

扫一扫