CSS3 毛玻璃效果
发布时间：2019-08-14 15:20:41 作者：LXEP 
我要评论
我要评论这篇文章主要介绍了CSS3 毛玻璃效果,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
毛玻璃效果做的好能使页面显得非常生动立体。直接上图
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: -1;
-webkit-filter: blur(20px);
filter: blur(20px);
background: rgba(255,0,0,.5);
}
可以看出blur效果是出来了，但导致了两个问题。首先由于blur出现了外阴影，这个比较好解决，只要加上 overflow: hidden; 就行了。其次四周20px的模糊半径范围内模糊效果会逐渐消退。如果对此比较介意，想让四周的模糊效果和中间一样，可以将伪元素尺寸外扩20px，为了保险起见，可以稍微再外扩一点到30px：
main {
…
overflow: hidden;
}
main::before {
…
margin: -30px;
}
最后将伪元素的红色背景色替换成body的背景图即可，效果如下。你也可以点击 这里 ，右键查看完整的源代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用CSS3制作倾斜导航条和毛玻璃效果,需要的朋友可以参考下2017-09-12- 这篇文章主要介绍了Css3新特性应用之视觉效果实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。2016-12-12
- 这篇文章主要为大家详细介绍了CSS3毛玻璃效果(blur)有白边问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-15
- 相信大家都知道毛玻璃效果做的好的话，能使页面显得非常生动立体，整体效果非常好，下面我们就来学习下如何利用CSS3实现毛玻璃效果。2016-09-25
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
CSS3的blur属性可以将图片加上模糊滤镜的效果,下面我们就来详细看一下使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法,需要的朋友可以参考下2016-07-08- 毛玻璃其实就是磨砂玻璃，能够模糊的看清背后的风景，让人感觉有种朦胧美，让界面看上去有些层次感，对毛玻璃感兴趣的小伙伴们可以参考一下2015-12-21
- 这篇文章主要介绍了css实现照片模糊效果类似毛玻璃效果,需要的朋友可以参考下2014-04-08
最新评论