毛玻璃实际效果做的好能使网页页面显得十分生动立体式。立即上图
body {
min-height: 100vh;
box-sizing: border-box;
margin: 0;
padding-top: calc(50vh - 6em);
font: 150%/1.6 serif;
background: url("iphone.jpg") fixed 0 center;
background-size: cover;
}
main {
margin: 0 auto;
padding: 1em;
max-width: 30em;
border-radius: .3em;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
background: hsla(0,0%,100%,.3);
}
<main>……</main>
去掉那些式样层面的编码，上面完成毛玻璃实际效果的关键编码以下：
body {
…
background: url("iphone.jpg") fixed 0 center;
background-size: cover;
}
main {
…
background: hsla(0,0%,100%,.3);
}
自然这个实际效果离大家的期待也有点间距，由于单纯性的30%的全透明度会让文本变的无法阅读文章。对网页页面来讲情况图只是起清理功效，文本才是最关键的。你能够增大全透明度的百分比，但这样网页页面会显得很呆板。以便让文本便于阅读文章，又维持网页页面的生动开朗，能够对上面的mian标识的情况做模糊不清解决。
你将会尝试blur滤镜，但可是的是实际效果不对：
main {
…
-webkit-filter: blur(3px);
filter: blur(3px);
}
用blur滤镜会将文本也模糊不清掉，更看不清了，只能舍弃。正确的做法是给mian标识提升伪元素::before，在伪元素上应用blur滤镜：（以便实际效果演试，再加了鲜红色情况色）
main {
position: relative;
…
}
main::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: ⑴;
-webkit-filter: blur(20px);
filter: blur(20px);
background: rgba(255,0,0,.5);
}
能够看出blur实际效果是出来了，但致使了两个难题。最先因为blur出現了外黑影，这个较为好处理，要是再加 overflow: hidden; 就可以了。其次4周20px的模糊不清半径范畴内模糊不清实际效果会慢慢消散。假如对此较为在意，想让4周的模糊不清实际效果和正中间1样，能够将伪元素规格外扩20px，以便商业保险起见，能够略微再外扩1点到30px：
main {
…
overflow: hidden;
}
main::before {
…
margin: ⑶0px;
}
最终将伪元素的鲜红色情况色更换成body的情况图便可，实际效果以下。你还可以点一下 这里 ，右键查询详细的源码。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 网页设计_移动端网页设计_大一网页设计作业成品_网页编辑软件_网页在线编辑 版权所有 （网站地图） 粤ICP备10235580号