1、opacity:

opacity的值会被它的所有子元素继承,也就是说不可能让一个元素比他的父元素更加不透明,但你可以让他变得更透明点

Firefox  Webkit  Opera支持,注意IE

2、使用Alpha通道可以像其他任何颜色值一样被子元素继承,但元素的整体不透明度并不受影响,rgba值只能应用到它的指定元素上,所以子元素可以否决所有的继承

Firefox  Webkit  Opera支持,注意IE

3、颜色变量

 p {color:black;}
p:last-child{
backgorund-color:black;
color:white;
}
p abbr {border-bottom : 6px double currentColor;}

更新父元素颜色而不需要担心如何把该颜色也设置到相关的子元素上

Firefox  Webkit  Opera支持,注意IE

css3 -- 颜色与不透明度的更多相关文章

  1. CSS3颜色特征温故

    网页是色彩的表现原理:显示器是由一个个像素构成,利用电子束来表现色彩.像素把光的三原色:红色(R).绿色(G).蓝色(B)组合成的色彩按照科学原理表现出来.一个像素包含8位元色彩的信息量,又从0 ~ ...

  2. css3 颜色记

    css3 颜色 opacity 使元素呈现出半透明效果. opacity:alphavalue || inherit alphavalue:默认值为1,可以取0~1任意浮点数.取值为1时,元素完全不透 ...

  3. 熟悉css/css3颜色属性

    颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...

  4. CSS3 颜色属性

    关键字颜色 red 十六进制颜色 #FF0000 RGB颜色   rgb(255,0,0) 新增的颜色表示方法 RGBa: RGB代表光的三原色,Red.Green和Blue CSS3中可以增加一个值 ...

  5. CSS3 颜色模式

    HSL .test{background-color:hsl(<length>, <percentage>, <percentage>);} 1.length 表示 ...

  6. CSS3颜色渐变模式

       1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...

  7. CSS3颜色渐变模式总结

    1.线性渐变:linear-gradient 语法:= linear-gradient([ [ | to [, ]+) = [left | right] || [top | bottom] = [ | ...

  8. CSS3 颜色渐变、阴影、渐变的阴影

    css阴影: 外阴影:box-shadow:X Y Npx #color; 内阴影:box-shadow:inset X Y Npx #color; 文字阴影:text-shadow:X Y Npx ...

  9. css3颜色

    镂空字的2种做法

随机推荐

  1. xmpp xml基本语义

    基本语义 9.2.1 消息语义 <message/>节种类可被看作“推”机制,一个实体推信息给其它实体,与 EMAIL 系统中发生的通信类似.所有消息节应该拥有‘to’ 属性,指定有意的消 ...

  2. 25个增强iOS应用程序性能的提示和技巧(初级篇)

    25个增强iOS应用程序性能的提示和技巧(初级篇) 标签: ios内存管理性能优化 2013-12-13 10:53 916人阅读 评论(0) 收藏 举报  分类: IPhone开发高级系列(34)  ...

  3. August 23rd 2016 Week 35th Tuesday

    The very essence of romance is uncertainty. 浪漫的精髓就在于它充满种种可能. And the uncertainty of life may be also ...

  4. 分布式缓存系统Memcached简介与实践

    缘起: 在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然已经可以实现对页面局部进行缓存,但还是不够灵 ...

  5. JS返回上一页

    <button  onclick="javascript:history.go(-1);">返回上一页</button> <button  oncli ...

  6. Qt中如何添加.qrc文件

    You need a resource file (.qrc) within which you embed the input text file. The input file can be an ...

  7. 安装CocoaPods报错 - [!] The dependency `AFNetworking (~> 3.1.0)` is not used in any concrete target.

    今天新机装cocopods时,等安装完毕发觉出现[!] The dependency `AFNetworking (~> 3.1.0)` is not used in any concrete ...

  8. db2 bind on luw

    https://www.ibm.com/support/knowledgecenter/SSEPGG_10.5.0/com.ibm.db2.luw.apdv.embed.doc/doc/c000556 ...

  9. hdu 1860统计字符

    本来是想用map写的,但是map里面会自动按字典序升序排序导致wa了一把,供 #include<time.h> #include <cstdio> #include <i ...

  10. Log4Net配置以及使用

    跟踪程序代码,及时发现程序的运行状态,是每个成熟的软件所必不可少的一个环节,网站发布到真实的环境之后,对于程序的运行状态,我们并不能想开发环境那也,点击调试.日志记录显示就尤为重要,在.NET中记录日 ...