About css to achieve ground-glass effect

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. (Reproduced please indicate the source) https://blog.csdn.net/zhangjing0320/article/details/90053476

Reference: https://www.cnblogs.com/ghost-xyx/p/5677168.html
people renderings: https://darylxyx.github.io/Demo/blur

If you want to know how, step by step this feature, see the reference link.

If you are anxious to use, I directly copy the following code on OK

<body>
	<div class="content">
		<div class="info">zxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXczxczxczxcZXcZXc</div>
	</div>
</body>
<style>
body {
	background: url("http://pic.58pic.com/58pic/13/17/92/22P58PICYyR_1024.jpg") center center / cover no-repeat fixed;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.content {
	height: 400px;
	width: 600px;
	word-break: break-all;
	z-index: 10;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px; 
	margin-left: -300px; // 不能用transform: translate(-50%, -50%)来代替，否则效果不是我们想要的，目前不知原因。
	overflow: hidden; // 为防止效果不超出 content 的范围
}

.content:before {
	content: '';
	background: url("http://pic.58pic.com/58pic/13/17/92/22P58PICYyR_1024.jpg") center center / cover no-repeat fixed;
	filter: blur(20px);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
	margin: -30px; //为解决元素的边缘模糊的效果减弱
}


.info {
	padding: 40px;
	color: #fff;
}
</style>

result:
Here Insert Picture Description

About css to achieve ground-glass effect

Guess you like