【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%;
	width: 100%;
	background: url(test2.jpg);
	background-size: 100vw;
}
.back{
	height: 90vh;
	width: 90vw;
	margin: 5vh 5vw;
	box-shadow: 0 0px 30px #333;
}
.glass{
	height: 90vh;
	width: 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;
}

效果图:

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

上一篇:LED Decorative Light Supplier - LED Neon Application: 5 Advantages


下一篇:图像拼接显示_python