您现在的位置是：网站首页> 编程资料编程资料

CSS3 毛玻璃效果使用CSS3制作倾斜导航条和毛玻璃效果Css3新特性应用之视觉效果实例CSS3毛玻璃效果(blur)有白边问题的解决方法利用CSS3实现毛玻璃效果示例源码使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法CSS毛玻璃效果如何实现css实现照片模糊效果类似毛玻璃效果

2021-09-03 1151人已围观

简介这篇文章主要介绍了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); } ……

去掉那些式样方面的代码，上面实现毛玻璃效果的核心代码如下：

 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的背景图即可，效果如下。你也可以点击这里，右键查看完整的源代码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：CSS 外边距(margin)重叠及防止方法使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码CSS columns实现两端对齐布局的示例代码用CSS Grid布局制作一个响应式柱状图的实现解决CCS中的margin：top塌陷问题css如何利用负margin技术实现平均布局解决margin 外边距合并问题 css 布局之两端布局的实例代码（利用父级负的margin）

下一篇：六大布局之FrameLayout的使用CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢