Css3实现背景毛玻璃效果
毛玻璃效果
ios里毛玻璃效果的使用非常多,本文介绍一个实现div毛玻璃背景的方法
css3 Filter
css3的Filter主要用在图像的特效处理上,默认值为none,还有以下备选项:
1.grayscale灰度
2.sepia褐色
3.saturate饱和度
4.hue-rotate色相旋转
5.invert反色
6.opacity透明度
7.brightness亮度
8.contrast对比度
9.blur模糊
10.drop-shadow阴影
每一种效果大家可以自己试试,考虑一下可以用在哪些方面,这里仅仅用到了其中的blur,帮助实现高斯模糊的效果。兼容性我试了一下最新的火狐和Chrome效果都是可以的,IE不用说了…
filter:blur()
参数默认是0,单位px,不接受%,参数值的大小表示屏幕上以多少像素融在一起, 所以值越大越模糊。
:before()
:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
用它来添加模糊背景,具体用法可以看我另外一篇?:before和:after
rgba()
毛玻璃背景上文字内容显示效果并不理想,无论字体颜色深或浅,看着总是怪怪的…因此还需要加上一层带色的半透明背景,一般是黑色,或白色。
示例:
整体通过三层重叠实现:
最下面是模糊层.blur_box:before,设置z-index: -2。
中间是rgba层.rgba,设置z-index: -1。
最上面是内容层.blur_box,设置z-index: 0。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>毛玻璃效果</title>
</head>
<style>
*{margin: 0;padding: 0;
}
.bg{background:url(1.jpg) no-repeat center center fixed;/* 与下面的blur_box:before中的background设置一样 */width:100%;height:100%;
}
.blur_box{z-index: 0;/* 为不影响内容显示必须为最高层 */position: relative;overflow: hidden;
}
.blur_box:before{content: "";/* 必须包括 */position: absolute;/* 固定模糊层位置 */width:300%;height:300%;left: -100%;/* 回调模糊层位置 */top: -100%;/* 回调模糊层位置 */background:url(1.jpg) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */filter: blur(20px);/* 值越大越模糊 */z-index: -2;/* 模糊层在最下面 */
}
.rgba{background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示,将背景颜色加深 */position: absolute;/* 固定半透明色层位置 */width:100%;height:100%;z-index: -1;/* 中间是rgba半透明色层 */
}
.content_text{text-align: center;color: rgba(255, 255, 255, 0.8);padding: 50px 30px;line-height: 28px;
}
article{width:40%;height:300px;margin:120px auto;
}
</style>
<body<div class="bg"><article class="blur_box"><div class="rgba"></div><!-- 写在这其实和blur_box:before效果相同,但已经设置过blur_box:before了 --><div class="content_text"><h1>haha</h1><p>texttexttexttexttexttexttexttexttext</p><p>texttexttexttexttexttexttexttexttext</p><p>texttexttexttexttexttexttexttexttext</p><p>texttexttexttexttexttexttexttexttext</p><p>texttexttexttexttexttexttexttexttext</p><p>texttexttexttexttexttexttexttexttext</p></div></article></div>
</body>
</html>
注释已经写的很详细了,但有一点还是得单独说一下。因为blur()产生的模糊效果当值越大时,就会有越宽的边缘渐变过渡,为了消除(实际上只是让它看不见),我将模糊层的宽度和高度都变大,再通过top和left负值调整位置。
.blur_box:before{content: "";position: absolute;width:300%;/* 模糊层的宽度和高度都变大 */height:300%;left: -100%;/* 回调模糊层位置 */top: -100%;background:url(1.jpg) no-repeat center center fixed; filter: blur(20px);z-index: -2;
}
其中.rgba也可改为白色半透明background-color: rgba(255,255,255,0.2);,完全取决于自己,然后相应改变内容的字色。blur()的参数也可以根据自己爱好试着改变出想要的效果。
Css3实现背景毛玻璃效果相关推荐
- CSS3设置背景毛玻璃效果
先抛出需求: 有一张全局大图,中间有一层文字,文字的背景使用毛玻璃模糊.类似效果如下: <!--html--> <div id="w"><articl ...
- html中背景条纹效果,css3 条纹背景滚动效果
今天在一个网站上看到这样一个效果,我一开始以为一个背景gif图片,为了验证我的想法,我打开firebug 一查看,原来不是gif.是用css3完成的.于是我就在查看css3的api帮助下尝试着 写一写 ...
- Android 抽屉菜单滑动时模糊背景 | 毛玻璃效果
先来看看要实现的效果图 录制的有点模糊在补一张静态图 简单的分析一下: 1⃣️一开始我一直以为抽屉菜单的背景是一张半透明的高斯模糊图片,一直尝试着用ps做一张然后发现并没有什么卵用(纯色背景或者图片是 ...
- CSS 技巧记录 - 平行四边形导航条、梯形导航条、毛玻璃效果
一.平行四边导航条 效果图: 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"& ...
- 纯CSS 毛玻璃效果
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第23天,点击查看活动详情 本文简介 点赞 + 关注 + 收藏 = 学会了 在我年轻时做过的开发中,毛玻璃应用得最广是在复杂的背景图 ...
- Qt Windows上实现毛玻璃效果
首发于我的个人博客:xie-kang.com 博客内有更多文章,欢迎大家访问 原文地址 前言: 很多人看到这个需求的第一想法都是录制软件窗口后的桌面内容,并且加上个高斯模糊就能实现了. 思路没有错,操 ...
- H5+CSS3 背景图毛玻璃效果实现方案
方案一.<img> + filter: blur() <div class="container"><img class="backgrou ...
- css3 仿aero,让Qt支持Win7的Aero和毛玻璃效果
Qt5增加了许多特性,其中 Qt Windows Extras 模块就增加了对Win7 Aero 效果的支持. 官网的介绍如下: Qt Windows Extras provide classes a ...
- 毛玻璃效果 php,CSS3教程之制作倾斜导航条和毛玻璃效果
这篇文章主要介绍了使用CSS3制作倾斜导航条和毛玻璃效果,需要的朋友可以参考下 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相 ...
最新文章
- 23hibernate_pessimistic_locking
- 机器人搬运礼盒程序_礼盒厂公司2020范文
- CTFshow 命令执行 web29
- UI:UITableView表视图
- Python 数据分析三剑客之 Matplotlib(一):初识 Matplotlib 与其 matplotibrc 配置文件
- 【numpy】20道numpy题目
- 平面设计中的网格系统pdf_平面设计基础知识
- go 是常驻内存吗_图解 Go 内存分配器
- 诺基亚推出全新IMPACT平台,交付快捷安全的物联网服务
- Python-UDP编程
- windbg学习---?? 和 ?
- idea mac 常用快捷键
- Excel Rate 函数的java 实现,等额本息计算反推利率
- 给图片加ALT属性是个什么意思?有什么优点呢
- Zabbix安装错误解决方案
- JAVA死磕系列 疯狂创客圈
- H.266/VVC相关技术学习笔记18:帧间预测中的AMVR技术(自适应运动适量精度)
- 如何查看SQL Server的索引碎片情况并进行整理
- python人工自动抠图_Python - AI自动抠图
- 极大后验概率(MAP)- maximum a posteriori(转载)
热门文章
- 解决safari浏览器拦截window.open
- Kubernetes Egress 网络策略指南
- Procreate插画基础网课培训平台有哪些
- python内存泄漏_诊断和修复Python中的内存泄漏
- jsp页面读取txt乱码
- 一只小蜜蜂... hdu2044
- [ CTF ]【天格】战队WriteUp-2022年第二届“长城杯”网络安全大赛
- 神经网络基础原理(三)-----分类问题实弹演练及一些小干货
- while 循环进入死循环?
- C++算法——DFS