【HTML/CSS】HTML磨砂效果研究

在网上找了一圈，发现磨砂效果没啥人发，找到一个代码，研究了一会，给大家提供一个参考。

upd 20.2.18 本效果只能在没有滑动条的页面使用（最高高度不超过100vh，宽度不过100vw）！否则会出问题！

HTML 模拟磨砂效果的主要思路是一个背景+blur模糊叠加。

---

HTML基础

<div class="back">
	<div class="glass"></div>
	<p>h e l l o w o r l d</p>
</div>

仅为示意。请保留两个div，p标签可替换为你想放在磨砂背景上的东西。

CSS

• 请加上 *{margin:0;padding:0;}。
• 给 .back 和 .glass 均加上同一个尺寸与背景。
• 给 .back 和 .glass 的背景用 background-size 调整为一样大小。
• 给 .glass 加上 filter:blur(20px); 以制造磨砂效果。
• 给 .glass 加上 background-position 来调整背景位置。（如果body为100 * 100px，glass为90 * 90px,就写成background-position:-5px -5px;）
• 给 .glass 的 position 改为 fixed 以让下面的 p 标签上得来。
• 给 .glass 的 z-index 改成负数（-99）让 p 和 下面操作的阴影看得见。
• 给 .back 加个阴影。（box-shadow:0 0 30px #333;）
• 给 p 标签一顿操作。（美化）
• 完成。

css代码：

*{
	margin: 0;
	padding: 0;
}
body{
	height: 100%;
	 100%;
	background: url(test2.jpg);
	background-size: 100vw;
}
.back{
	height: 90vh;
	 90vw;
	margin: 5vh 5vw;
	box-shadow: 0 0px 30px #333;
}
.glass{
	height: 90vh;
	 90vw;
	background: url(test2.jpg);
	background-size: 100vw;
	background-position: -5vw -5vh;
	filter: blur(20px);
	position: fixed;
	z-index: -99;
}
p{
	color: white;
	text-align: center;
	font-size: 60px;
	font-family: "lucida console";
	line-height: 90vh;
}

效果图：