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之多背景background使用示例
Oct 18 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 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
第九节--绑定
2006/11/16 PHP
php jsonp单引号转义
2014/11/23 PHP
PHP 中常量的知识整理
2017/04/14 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
给Function做的OOP扩展
2009/05/07 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
AngularJS内置指令
2015/02/04 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
Javascript中的神器——Promise
2017/02/08 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
layui的select联动实现代码
2019/09/28 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
python中doctest库实例用法
2020/12/31 Python
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
UNIX命令速查表
2012/03/10 面试题
优秀班干部主要事迹材料
2015/11/04 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
nginx访问报403错误的几种情况详解
2022/07/23 Servers