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. Odoo创建数据库时出现的问题 DataError: new encoding (UTF8) is incompatible with the encoding of the template database (SQL_ASCII)

    解决方案: 执行如下指令进入PostgreSQL控制台: sudo -u postgres psql postgres 然后在PostgreSQL控制下按顺序执行如下指令: update pg_dat ...

  2. Hibernate基本CRUD

    1 hibernate 框架介绍 冬眠:开发的代码基本不变. 1.1回顾jdbc Java提供的标准的数据访问的API 作用:完成应用程序java程序中的数据和db中的数据进行交换. 工作过程: A ...

  3. 将rabbitmq整合到Spring中手动Ack

    如果要手动ack,需要将Listener container 的 acknowledge 设置为manul,在消费消息的类中需实现ChannelAwareMessageListener接口. over ...

  4. NYOJ之水仙花数

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsAAAAInCAIAAAAZDHiCAAAgAElEQVR4nO3dPVLjzNoG4G8T5CyEFC

  5. 利用drozer进行Android渗透测试

    一.安装与启动 1. 安装 第一步:从 http://mwr.to/drozer 下载Drozer (Windows Installer) 第二步:在 Android 设备中安装 agent.apk ...

  6. Git+VirtalBaox+Vagrant创建Linux虚拟机

    文章内容来自Udacity课程:Linux Command Line Basics--Getting Started with the Shell Your own Linux box To lear ...

  7. Netty网络编程之NIO概览与简单应用

    >>关于NIO Java NIO即Java Non-blocking IO(Java非阻塞I/O),是Jdk1.4之后增加的一套操作I/O工具包,又被叫做Java New IO. (1)R ...

  8. java中文乱码解决方法汇总

    public static void main(String[] argv){ try {                 System.out.println(“中文”);//1           ...

  9. Object.create 函数 (JavaScript)

    创建一个具有指定原型且可选择性地包含指定属性的对象. 语法 Object.create(prototype, descriptors) 参数 prototype 必需.  要用作原型的对象.  可以为 ...

  10. maven pom.xml示例

    示例说明: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3. ...