CSS遮罩效果和毛玻璃效果
前面的话
本文将详细介绍CSS遮罩效果和毛玻璃效果
遮罩效果
普通遮罩
一般地,处理全屏遮罩的方法是使用额外标签
<style>
.overlay{
position:fixed;
top: 0;right: 0;left: 0;bottom: 0;
background:rgba(0,0,0,0.8);
}
.lightbox{
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
margin:auto;
z-index:1;
width: 100px;
height: 100px;
background-color: white;
}
</style>
<div class="overlay"></div>
<div class="lightbox"></div>
效果如下
阴影遮罩
对于简单的应用场景和产品原型来说,我们可以利用box-shadow来达到调暗背景的效果
box-shadow: 0 0 0 999px rgba(0,0,0,0.8);
这个初步的解决方案有一个明显的问题,就是它无法在较大的屏幕分辨率(如>2000px)下正常工作。要么加大数字来缓解这个问题,要么换用视口单位来一劳永逸地解决它,只有这样才能确保"遮罩层"总是可以覆盖(至超出)视口
box-shadow: 0 0 0 50vmax rgba(0,0,0,0.8);
这个技巧非常简洁易用,但它存在两个非常严重的问题,从而制约了其使用场景
1、由于遮罩层的尺寸是与视口相关,而不是与页面相关的,滚动页面时,遮罩层的边缘就露出来了,除非给它加上position:fixed这个样式,或者页面并没有长到需要滚动的程度
2、这种效果无法防止用户的鼠标与页面的其他部分发生交互
<style>
.lightbox{
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
margin:auto;
z-index:1;
width: 100px;
height: 100px;
background-color: white;
box-shadow: 0 0 0 50vmax rgba(0,0,0,0.8);
}
</style>
<div class="lightbox"></div>
模糊遮罩
把关键元素之外的一切都模糊掉,用来配合(或取代)阴影效果,这个效果的真实感更强,因为它营造出了"景深效果。视线聚焦在距离较近的物体上时,远处的背景就是虚化的
filter:blur(5px);
下面是一个实例,鼠标移出弹出框时, 模糊消失
毛玻璃效果
下面来逐步实现毛玻璃效果
半透明颜色
半透明颜色最初的使用场景之一就是作为背景。将其叠放在照片类或其他花哨的背层之上,可以减少对比度,确保文本的可读性
下面是一个实例
<style>
.outer{
position:relative;
height: 200px;
width: 200px;
background: hsl(20,40%,90%);
background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
linear-gradient(90deg,#ab4 23px,transparent 0),
linear-gradient(90deg,#655 41px,transparent 0);
background-size: 41px 100%,61px 100%,83px 100%;
}
.inner{
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
font: bold 20px/1.5 '宋体';
height: 160px;
width: 180px;
margin:auto;
background:hsla(0,0%,100%,.3);
}
</style>
<div class="outer">
<div class="inner">前端入门容易精通难,说的是前端,更指javascript</div>
</div>
【增大不透明度】
设置为30%的不透明度,文字难以看清。当然,可以通过提升不透明度来增加文本可读性,但效果整个效果就没有那么生动了
background:hsla(0,0%,100%,.6);
模糊处理
在传统的平面设计中,通常把文本层所覆盖的那部分图片区域作模糊处理。模糊的背景看起来不那么花哨,因此在它之上的文本就相对比较易读了。过去,由于模糊运算的性能消耗极其巨大,以致于这个技巧在网页设计中鲜有用武之地。不过,随着GPU的不断进化以及硬件加速的不断普及,眼下这个技巧已经逐渐流行起来
【父元素模糊】
如果直接对父元素设置模糊,则文本本身也会被模糊处理
<style>
.outer{
position:relative;
height: 200px;
width: 200px;
background: hsl(20,40%,90%);
background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
linear-gradient(90deg,#ab4 23px,transparent 0),
linear-gradient(90deg,#655 41px,transparent 0);
background-size: 41px 100%,61px 100%,83px 100%;
filter:blur(5px);
}
.inner{
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
font: 20px/1.5 '宋体';
height: 160px;
width: 180px;
margin:auto;
background:hsla(0,0%,100%,.6);
}
</style>
<div class="outer">
<div class="inner">前端入门容易精通难,说的是前端,更指javascript</div>
</div>
【伪元素模糊】
因此,对一个伪元素进行处理,然后将其定位到元素的下层
<style>
.outer{
position:relative;
height: 200px;
width: 200px;
z-index:1;
background: hsl(20,40%,90%);
background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
linear-gradient(90deg,#ab4 23px,transparent 0),
linear-gradient(90deg,#655 41px,transparent 0);
background-size: 41px 100%,61px 100%,83px 100%;
}
.inner:before{
content:'';
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
filter:blur(5px);
background: rgba(255,0,0,0.5);
z-index:-1;
}
.inner{
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
font: 20px/1.5 '宋体';
height: 160px;
width: 180px;
margin:auto;
background:hsla(0,0%,100%,.3);
}
</style>
<div class="outer">
<div class="inner">前端入门容易精通难,说的是前端,更指javascript</div>
</div>
背景复制
下面复制父级元素的背景来替换半透明的红色。如果保证毛玻璃下的背景正好与父元素背景的图案相吻合呢?使用fixed即可,将父元素和伪元素的背景设置为相同,且都相对于视口设置,可实现目标
<style>
.outer{
position:relative;
height: 200px;
width: 200px;
z-index:1;
background: hsl(20,40%,90%) fixed;
background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
linear-gradient(90deg,#ab4 23px,transparent 0),
linear-gradient(90deg,#655 41px,transparent 0);
background-size: 41px 100%,61px 100%,83px 100%;
}
.inner:before{
content:'';
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
filter:blur(5px);
background: hsl(20,40%,90%) fixed;
background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
linear-gradient(90deg,#ab4 23px,transparent 0),
linear-gradient(90deg,#655 41px,transparent 0);
background-size: 41px 100%,61px 100%,83px 100%;
z-index:-1;
}
.inner{
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
font: 20px/1.5 '宋体';
height: 160px;
width: 180px;
margin:auto;
background:hsla(0,0%,100%,.3);
}
</style>
<div class="outer">
<div class="inner">前端入门容易精通难,说的是前端,更指javascript</div>
</div>
效果如下
样式封装
毛玻璃样式封装如下
.frostedglass{
width: 100px;
height: 100px;
font-size:16px;
/*计算值为 height - width*top*2*/
line-height: 70px;
z-index:1;
border-radius:50%;
position:relative;
overflow: hidden;
text-align:center;
background: hsl(20,40%,90%) fixed;
background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
linear-gradient(90deg,#ab4 23px,transparent 0),
linear-gradient(90deg,#655 41px,transparent 0);
background-size: 41px 100%,61px 100%,83px 100%;
}
.frostedglass-inner:before{
content:'';
position:absolute;
top: 0;right: 0;left: 0;bottom: 0;
filter:blur(5px);
background: hsl(20,40%,90%) fixed;
background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
linear-gradient(90deg,#ab4 23px,transparent 0),
linear-gradient(90deg,#655 41px,transparent 0);
background-size: 41px 100%,61px 100%,83px 100%;
z-index:-1;
}
.frostedglass-inner{
position:absolute;
top: 15%;right: 15%;left: 15%;bottom: 15%;
background:hsla(0,0%,100%,.3);
}
下面是一个例子
<div class="frostedglass">
<div class="frostedglass-inner">前端开发</div>
</div>
<div class="frostedglass">
<div class="frostedglass-inner">HTML</div>
</div>
CSS遮罩效果和毛玻璃效果的更多相关文章
- 《CSS揭秘》之毛玻璃效果知识点
实现代码: CodePen:毛玻璃效果 Dabblet:毛玻璃效果 HTML: <main> <blockquote> <em>"The only way ...
- CSS 奇思妙想 | 全兼容的毛玻璃效果
通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...
- 用CSS伪类实现毛玻璃效果
效果图: 思路: 内容容器需要一个before伪类,负责引用跟背景容器相同的背景图,还需要一个after伪类,用来加上半透明的白色背景.这两个伪类的层级需都为-1,而内容容器本身的层级为1,这样做可以 ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- CSS技巧收集——毛玻璃效果
先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的 ...
- css透明度、毛玻璃效果
透明度: 1.opacity 背景颜色和字体同时透明 2.background:rgba(255,255,255,0.2); 只是背景颜色透明,字体不透明 代码: .info{ backgr ...
- 实现一个成熟的底层毛玻璃效果(纯CSS)
写在前面 毛玻璃背景是一个很常见的网页样式,想要实现,其实并不难,但经过我在网上的搜索发现,大量实现方法都较为不规范,且把问题复杂化了(例如各种z-index属性和position的定位)现提供一个代 ...
- css实现毛玻璃效果
css实现毛玻璃效果,效果图 1,html代码 <div class="mainHolder"> <div class="textHolder" ...
随机推荐
- sk_buff Structure
The structure has changed many times in the history of the kernel,both to add new options and to reo ...
- js 原生ajax实现
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 用 Django 管理现有数据库
在多数项目中,总有一些几乎一成不变的 CRUD 操作,编写这些代码很无聊,但又是整个系统必不可少的功能之一.我们在上一个项目中也面临类似的问题,虽然已经实现了一个功能相对完整的管理后台,也尽量做到了代 ...
- linux驱动编写之poll机制
一.概念 1.poll情景描述 以按键驱动为例进行说明,用阻塞的方式打开按键驱动文件/dev/buttons,应用程序使用read()函数来读取按键的键值.这样做的效果是:如果有按键按下了,调用该re ...
- 记上海技术交流会之行备忘录(superset与odoo整合)
像每个早上一样,早起跑步回来冲个热水澡,简单的吃下早饭,看书到8:50的样子,准备赶10:02分的火车.在我看到周总的微信时,我知道这将是一个新的起点,在自己过往的2年时间,将更多的精力和时间用在了英 ...
- 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js
做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...
- Windows Community Toolkit 4.0 - DataGrid - Part01
概述 在上面一篇 Windows Community Toolkit 4.0 - DataGrid - Overview 中,我们对 DataGrid 控件做了一个概览的介绍,今天开始我们会做进一步的 ...
- 结对项目——图形界面实现与dll动态链接
先来一发软件截图~~~ 生成题目的界面 测评界面 第三块本来准备做一个文件历史记录的界面,但是由于时间不够,暂时还没做完. 图形界面的设计与实现 由于对传统的对话框风格不太满意,所以这次作业的图形界面 ...
- Effective java ---遵守普遍接受的命名规则
alibaba的java命名规范如下: . [强制]代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束. 反例: _name / __name / $Object / name_ ...
- django之全局默认设置查看及admin语言设置
django之admin语言设置 admin后台管理默认使用的是英文,有时我们需要将其设置成自己的语言以方便使用管理: 将 LANGUAGE_CODE = '' 设置为欲设置的语言即可. 以下为dja ...