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. 【XLL 框架库函数】 InitFramework

    初始化框架库,它是简单的初始化临时 XLOPER/XLOPER12 内存结构,释放任何已经分配的内存. short WINAPI InitFramework(void); 参数 这个函数没有参数 备注 ...

  2. 35. Search Insert Position

    题目: Given a sorted array and a target value, return the index if the target is found. If not, return ...

  3. iOS学习资源个人整理

    1208更新: http://www.tuyiyi.com                                    图翼网 https://github.com/Alamofire/Al ...

  4. 关于each

    1种 通过each遍历li 可以获得所有li的内容 <!-- 1种 --> <ul class="one"> <li>11a</li> ...

  5. NYOJ题目125盗梦空间

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAssAAANLCAIAAAA4rUfgAAAgAElEQVR4nOydq7LdyrKm+yXM/SDG4y

  6. Quartus II9.0 使用中文输入的方法

      Quartus II可以用中文了 我们都知道高版本的quartus里面不支持中文,就连最新版的10.0也不支持,还好找到了一种方法,和大家分享一下: 具体步骤:quartus ——tools——o ...

  7. mysql优化学习笔记

    优化sql的一般步骤 通过show status了解各种sql的执行频率 定位执行效率低的sql语句 通过explain分析效率低的sql 通过show profile分析sql 通过trace分析优 ...

  8. sql server 的cpu使用率过高的分析

    有哪些SQL语句会导致CPU过高? 1.编译和重编译 编译是 Sql Server 为指令生成执行计划的过程.Sql Server 要分析指令要做的事情,分析它所要访问的表格结构,也就是生成执行计划的 ...

  9. php获取一维,二维数组长度的方法(有实例)

    在php中获取数组长度方法很简单,php为我们提供了两个函数可以计算一维数组长度,如count,sizeof都可以直接统计数组长度哦,下面我们来看几个实例吧.php如何获取数组的长度,使用php函数c ...

  10. Android N 新特性 + APP开发注意事项

    1. 多窗口MultiWindow 多窗口MultiWindow,这是Android N里对开发者影响比较大的特性,也是大家疑问比较多的地方.站在开发者的角度其实不必太担心这个特性会导致我们需要修改很 ...