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. 通过xib加载UITableViewCell的新方式

    我们以前通常会这样做 - (UITableViewCell  *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPa ...

  2. September 11th 2016 Week 38th Sunday

    Nothing happens unless first a dream. 一切始于梦想. When everything seems to be going against you, remembe ...

  3. js中Number对象与MATH方法整理总结

    W3C的文档: Number 对象属性 属性 描述 constructor 返回对创建此对象的 Number 函数的引用. MAX_VALUE 可表示的最大的数. MIN_VALUE 可表示的最小的数 ...

  4. Rotate partitions in DB2 on z

    Rotating partitions   You can use the ALTER TABLE statement to rotate any logical partition to becom ...

  5. LeetCode : 93. Restore IP Addresses

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABZ4AAAHUCAYAAAC6Zj2HAAAMFGlDQ1BJQ0MgUHJvZmlsZQAASImVlw

  6. 玩转Java对象和XML相互转换

    最近在项目中一直出现Java对象和XML之间的相互转换,一开始由于项目很庞大,我又是临时调度过去,导致在按照项目组长的要求进行写代码的同时,总是在这块云里雾里,最近才慢慢开始搞清楚项目中具体的使用缘由 ...

  7. Faster-rnnlm代码分析3 - EvaluateLM(前向计算ForwardPropagate)

    先采用一个简单的输入文本做测试 [root@cq01-forum-rstree01.cq01.baidu.com rnnlm]# pwd /home/users/chenghuige/rsc/app/ ...

  8. Web框架之Tornado

    概述 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了 ...

  9. 【JAVA多线程问题之死锁】

    一.死锁是什么? 举个例子:两个人一起吃饭,每个人都拿了一只筷子,双方都在等待对方将筷子让给自己,结果两个人都吃不了饭.这种情况和计算机中的死锁情况很相似. 假设有两个线程,互相等待对方释放占有的锁, ...

  10. SublimeText 插件

    Markdown 预览 想要预览,可以配置下面的快捷方式. { "keys": ["alt+m"], "command": "ma ...