【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;
}
效果图:
标签:back,glass,HTML,background,磨砂,position,CSS 来源: https://www.cnblogs.com/haraki/p/html_glass.html