为颜色加透明度值：rgba值，“a”在该属性中代表：alpha。alpha的取值范围是从0到1。这个新特性允许我们指定一个透明的颜色值，使得我们的工作更轻松了。。
练习用html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="hi.baidu.com/yongganaqi" />
<meta name="keywords" content="7qi" />
<meta name="description" content="7qi" />
<title>练习</title>
<style>
div{
width:20px;
height:50px;float:left;}
</style>
</head>
<body>
<div style="background: rgb(243,191,189);"></div>
<div style="background: rgb(246,143,142);"></div>
<div style="background: rgb(249,95,94);"></div>
<div style="background: rgb(252,47,47);"></div>
<div style="background: rgb(255,0,0);"></div>
<br />
<br />
<div style="background: rgba(255,0,0,0.2);clear:both;"></div>
<div style="background: rgba(255,0,0,0.4);"></div>
<div style="background: rgba(255,0,0,0.6);"></div>
<div style="background: rgba(255,0,0,0.8);"></div>
<div style="background: rgba(255,0,0,1);"></div>
</body>
</html>
你看到两者的不同了吗？据上的蓝色区域采用的是RGBA值显示的，据上的红区采用的是RGB值显示的。
<div style="background: rgba(255,0,0,0.2);"></div>
<div style="background: rgba(255,0,0,0.4);"></div>
<div style="background: rgba(255,0,0,0.6);"></div>
<div style="background: rgba(255,0,0,0.8);"></div>
<div style="background: rgba(255,0,0,1);"></div>
另一个采用的代码：
<div style="background: rgb(243,191,189);"></div>
<div style="background: rgb(246,143,142);"></div>
<div style="background: rgb(249,95,94);"></div>
<div style="background: rgb(252,47,47);"></div>
<div style="background: rgb(255,0,0);"></div>
当使用需要透明度的时候，只需：background: rgba(255,0,0,0.2);
到目前为止，该属性支持的浏览器有：Firefox 3.0+、Chrome 4.0+、Safari 3.1+、Opera 10.0+。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
