CSS3 毛玻璃效果


Posted in HTML / CSS onAugust 14, 2019

毛玻璃效果做的好能使页面显得非常生动立体。直接上图

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滤镜,但可惜的是效果不对:

CSS3 毛玻璃效果

main {
    …
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

用blur滤镜会将文字也模糊掉,更看不清了,只能放弃。正确的做法是给mian标签增加伪元素::before,在伪元素上使用blur滤镜:(为了效果演示,加上了红色背景色)

CSS3 毛玻璃效果

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:

CSS3 毛玻璃效果

main {
    …
    overflow: hidden;
}
main::before {
    …
    margin: -30px;
}

最后将伪元素的红色背景色替换成body的背景图即可,效果如下。你也可以点击 这里 ,右键查看完整的源代码。

CSS3 毛玻璃效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 #HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 #HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 #HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 #HTML / CSS
详解css3中 text-fill-color属性
Jul 08 #HTML / CSS
解决margin 外边距合并问题
Jul 03 #HTML / CSS
css3实现蒙版弹幕功能
Jun 18 #HTML / CSS
You might like
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
自动更新作用
2006/10/08 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
原生js实现日期联动
2015/01/12 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
Python队列的定义与使用方法示例
2017/06/24 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
Python装饰器知识点补充
2018/05/28 Python
Python3解释器知识点总结
2019/02/19 Python
python实现手机销售管理系统
2019/03/19 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
爱岗敬业演讲稿范文
2014/01/14 职场文书
普通员工辞职信
2014/01/17 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
求职信结尾怎么写
2014/05/26 职场文书
2014年科普工作总结
2014/12/06 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
面试复试通知单
2015/04/24 职场文书
python playwrigh框架入门安装使用
2022/07/23 Python