使用CSS3的box-shadow实现双透明遮罩层对话框
box-shadow介绍
在我之前的一篇文章《从天猫和支付宝身上学习opcity与rgba》中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba。他们需要分别依赖于不同的html结构。
例如用opacity方法:点我查看DEMO。
我一度认为实现这种双遮罩层的效果必须需要借助background,事实上利用CSS3的box-shadow属性可以轻松模拟出这种效果。再次查看Demo。
box-shadow: 0 0 0 20px rgba(0, 0 ,0 ,0.5);
五个参数依次代表:向右偏移量,向下偏移量,模糊度,阴影面积大小,颜色。
之前说过,rgba非常强大,除了可以作用在background-color上,还可以作用在box-shadow等颜色值上。现在使对话框的box-shadow的模糊度为0,既完全不模糊,并且使其阴影面积为20px,背景透明,即可为对话框模拟出一个20px宽的透明border。
可以给一个元素赋予多重box-shadow,这意味着从原则上来讲,我们可以给元素模拟出N个border。
当然,虽然box-shadow可以模拟出border的效果,但它与border相去甚远。在W3C盒模型中,border的宽度会影响到元素所占面积,在IE盒模型中,border的宽度会影响content所占面积。但是box-shadow会被元素占位计算所无视,无论有多宽的box-shadow,元素都不会加宽哪怕一点。当多个相邻元素都有box-shadow时,他们的阴影便会根据元素的z-index进行遮盖,在默认情况下时,后边的元素的box-shadow会遮盖住前边的元素。
当元素设置了opacity属性后,与其相关的border,background,以及子元素都会透明,box-shadow也会受其影响变为透明。
我们可以这样理解,假如元素是集装箱中摆放的一个个盒子的话,box-shadow就是盒子的影子,它不能占用集装箱空间,但是它可以遮挡住其它盒子。
查看Demo:box-shadow的占位与层级。
关于z-index
刚才提到使用z-index来改变box-shadow的遮挡顺序。其实改变的不是box-shadow,而是元素的层级。假如两个元素重合,z-index高者会遮挡住低者。那么到底什么是z-index呢?
在 W3C CSS2.1 规范中,每个元素都具有三维的空间位置,除我们所熟悉的水平和垂直位置外,元素还可在 "Z轴" 方向上层层相叠、依次向前排开。
当然,并不是说页面上所有的z-index会被统一管理。这里需要引入一个概念,叫做层叠上下文(stacking context)。同一个层叠上下文中,层叠级别大的显示在上,层叠级别小的显示在下,相同层叠级别时,遵循后来居上的原则(back-to-font);不同层叠上下文中,元素显示顺序以父级层叠上下文的层叠级别来决定显示的先后顺序。与自身的层叠级别无关;
如何创建一个层叠上下文?
1.当某个元素的 z-index
被显示定义且不为auto,position 不为 static 时,会产生新的局部层叠上下文。
2.当opacity值小于1时,该元素会创建新的局部层叠上下文。
下面看一个在IE6-7中的bug示例:
<style>
.blue{top:20px;height:50px;width:150px;background:blue; }
.yellow{top:10px; left:20px;height:30px;width:100px;background:yellow;}
.red{top:0;left:50px;height:100px;width:50px;background:red;}
</style>
<div style="position:relative" class="blue">
<div style="position:absolute;z-index:1;" class="yellow"></div>
</div>
<div style="position:absolute;" class="red"></div>
上面这段代码在IE8+及符合W3C规范的标准浏览器中,从高到底依次是yellow,red,blue。而在IE6-7中,从高到底依次是red,yellow,blue。这是由于在IE6-7中,没有设置z-index的定位元素仍然会创建一个层叠上下文。
另外需要特别注意的是,虽然opacity小于1时可以创建一个层叠上下文,会对其子元素的定位造成影响,但是它本身的z-index是无法设置的,在与同层叠上下文中的其它元素相比时,z-index应看作0或auto。当然,如果这个透明元素是定位元素的话,自然可以设置z-index了。
虽然我理解到了z-index之中的奥妙,但是可能文笔与实例不足,阅读者如果有困惑可以阅读下doyoe写的文章:你需要了解的z-index世界。
我与之相比犹如萤火之于皓月,本文中介绍z-index部分权当抛砖引玉吧!
(完)
使用CSS3的box-shadow实现双透明遮罩层对话框的更多相关文章
- html中设置透明遮罩层的兼容性代码
说明:下面遮罩层的height视实际情况自行修改,要求显示的div层的样式需加上position:relative,位于遮罩层层div的下面一行.<div id="ceng" ...
- Virtual Box中 CentOS双网卡设置
Virtual Box中 CentOS双网卡设置: 在Virtual Box中安装CentOS x86-64 6.4(final),配置了双网卡,eth0 为桥接模式 , eth1为内网模式 ...
- CSS3 Flex Box(弹性盒子)
CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
- CSS3学习笔记(5)—页面遮罩效果
今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- iOS开发必备HUD(透明指示层)
iOS开发必备HUD(透明指示层) 字数421 阅读2123 评论1 喜欢51 1.MBProgressHUD GitHub地址:https://github.com/jdg/MBProgressHU ...
- 解决css3遮罩层挡住下面元素事件的方法
比如大家常看到的鼠标移入图片中,会有一个挡住图片的黑色半透明遮罩层,上面还有文字介绍,这时候就会遇到该层遮挡住下面图片的跳转链接事件,这时候怎么办呢?有个简单的css3属性可以快速解决该问题:poin ...
随机推荐
- 【原】Android热更新开源项目Tinker源码解析系列之二:资源文件热更新
上一篇文章介绍了Dex文件的热更新流程,本文将会分析Tinker中对资源文件的热更新流程. 同Dex,资源文件的热更新同样包括三个部分:资源补丁生成,资源补丁合成及资源补丁加载. 本系列将从以下三个方 ...
- EasyMesh - A Two-Dimensional Quality Mesh Generator
EasyMesh - A Two-Dimensional Quality Mesh Generator eryar@163.com Abstract. EasyMesh is developed by ...
- 菜鸟学Struts2——Actions
在对Struts2的工作原理学习之后,对Struts2的Action进行学习.主要对Struts2文档Guides中的Action分支进行学习,如下图: 1.Model Driven(模型驱动) St ...
- Android业务组件化之现状分析与探讨
前言: 从个人经历来说的话,从事APP开发这么多年来,所接触的APP的体积变得越来越大,业务的也变得越来越复杂,总来来说只有一句话:这是一个APP臃肿的时代!所以为了告别APP臃肿的时代,让我们进入一 ...
- OpenCV人脸识别Eigen算法源码分析
1 理论基础 学习Eigen人脸识别算法需要了解一下它用到的几个理论基础,现总结如下: 1.1 协方差矩阵 首先需要了解一下公式: 共公式可以看出:均值描述的是样本集合的平均值,而标准差描述的则是样本 ...
- CSS知识总结(七)
CSS常用样式 5.背景样式 1)背景颜色 background-color : transparent | color 常用值:①英文单词,②十六进制,③RGB或RGBA 另外,还有一种是 渐变色彩 ...
- BPM端到端流程解决方案分享
一.需求分析 1.企业规模的不断发展.管理水平的不断提升,通常伴随着企业各业务板块管理分工更细.更专业,IT系统同样越来越多.越来越专 业化.不可避免的,部门墙和信息孤岛出现了,企业的流程被部门或者I ...
- Stack Overflow 排错翻译 - Closing AlertDialog.Builder in Android -Android环境中关闭AlertDialog.Builder
Stack Overflow 排错翻译 - Closing AlertDialog.Builder in Android -Android环境中关闭AlertDialog.Builder 转自:ht ...
- Oracle创建表空间
1.创建表空间 导出Oracle数据的指令:/orcl file=C:\jds.dmp owner=jds 导入Oracle数据的指令:imp zcl:/orcl file=C:\jds.dmp fu ...
- 2DToolkit官方文档中文版打地鼠教程(三):Sprite Collections 精灵集合
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...