HTML5系列代码：RGBA半透明效果

CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。
RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB
颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
基本语法:
　　R：红色值。正整数（0~255）
　　G：绿色值。正整数（0~255）
　　B：蓝色值。正整数（0~255）
　　A：透明度。取值0~1之间
浏览器的兼容性：
RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>RGBA半透明效果</title>
<style type="text/css">
ul {list-style:none;margin:10px;padding:0;background:url(../images/charactor.png) 10px 0 no-repeat;
}
li {height:20px;}
li:nth-child(1) {background:rgba(255, 153, 0, 0.1);}
li:nth-child(2) {background:rgba(255, 153, 0, 0.2);}
li:nth-child(3) {background:rgba(255, 153, 0, 0.3);}
li:nth-child(4) {background:rgba(255, 153, 0, 0.4);}
li:nth-child(5) {background:rgba(255, 153, 0, 0.5);}
li:nth-child(6) {background:rgba(255, 153, 0, 0.6);}
li:nth-child(7) {background:rgba(255, 153, 0, 0.7);}
li:nth-child(8) {background:rgba(255, 153, 0, 0.8);}
li:nth-child(9) {background:rgba(255, 153, 0, 0.9);}
li:nth-child(10) {background:rgba(255, 153, 0, 1);}
</style>
<body>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</body>
</html>

HTML5系列代码：RGBA半透明效果相关推荐

HTML5系列代码：为文字设置描边效果文字发光
padding属性bai:设置du所有内边距属性. 行内非替换元素上设置的内边距不会影响行高计算:因zhi此,如果一dao个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重 ...
HTML5系列代码：模仿杂志的多列版式
column-span 属性规定元素应横跨多少列. font-weight 属性设置文本的粗细. 该属性用于设置显示元素的文本中所用的字体加粗. 数字值 400 相当于关键字 normal,700 ...
HTML5系列代码：框模型的大小
margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度. 块级元素的垂直相邻外边距会合并,而行内元 ...
HTML5系列代码：使用自定义图像来作为空距
white-space 属性设置如何处理元素内的空白. 这个属性声明建立布局过程中如何处理元素中的空白符.值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的. <html& ...
HTML5系列代码：个人页面
text-decoration 属性规定添加到文本的修饰. 注释:修饰的颜色由 "color" 属性设置. <!DOCTYPE html PUBLIC "-//W3 ...
HTML5系列代码：使用三种方法插入图像
drawImage() 方法在画布上绘制图像.画布或视频. drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸. <!DOCTYPE HTML> < ...
HTML5系列代码：设置滚动条
scrolling 属性规定是否在 iframe 中显示滚动条. 默认地,如果内容超出了 iframe,滚动条就会出现在 iframe 中. <html ><head>< ...
HTML5系列代码：一个完整简单的页面
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. 您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上 ...
HTML5系列代码：为文字设置深灰色阴影
text-shadow 属性向文本设置阴影. 默认值: none 继承性: yes 版本: CSS3 JavaScript 语法: object.style.textShadow="2px ...

HTML5系列代码：RGBA半透明效果

HTML5系列代码：RGBA半透明效果相关推荐

最新文章

热门文章