CSS3中各种颜色属性的使用教程

作者：佚名字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含css3属性,css3新增属性,css3动画属性,css3属性选择器,css3新属性等相关知识,佚名希望在学习及工作中可以帮助到您

rgba 颜色
原本 CSS 中的颜色除了可用 16 进位来表示 RGB 颜色值之外，还可以使用预先定义好的颜色名称。而 RGBA 是以 RGB 为基础再加上不透明度的属性。

</div>

rgba(red, green, blue, opacity)

</div> </div>

其中的 red、green 及 blue 等颜色值是用 10 进位或是百分比(%)的方式来表示，允许的值为 0 到 255 之间的整数值；而 opacity 不透明度允许的值为 0 到 1 之间带有小数的数值。

快速的看一下实际的范例：

</div>

<body>
<div class="rgba1">rgba(0, 0, 0, 1)</div>
<div class="rgba2">rgba(100%, 100%, 0%, 0.75)</div>
<div class="rgba3">rgba(144, 180, 60, 1)</div>
<div class="rgba4">rgba(204, 102, 102)</div>
<div class="rgba5">rgba(300, -102, 0, 1)</div>
<div id="log"></div>
</body>

</div> </div>

接着换 CSS：

</div>

div {
width: 220px;
height: 50px;
float: left;
margin-right: 10px;
line-height: 50px;
text-align: center;
border: 1px solid #000;
}

</div> </div>

基本用法：

</div>

.rgba1 {
/* 等同于 #ffffff 或是 rgba(100%, 100%, 100%, 1) */
color: rgba(255, 255, 255, 1);
/* 等同于 #000000 或是 rgba(0%, 0%, 0%, 1) */
background-color: rgba(0, 0, 0, 1);
}
.rgba3 {
background-color: rgba(144, 180, 60, 1);
}

</div> </div>

2016517115126207.png (500×70)

除了给实际的颜色值之外，也可以用百分比(%)来表示：

</div>

.rgba2 {
background-color: rgba(100%, 100%, 0%, 0.75);
}

</div> </div>

2016517115159144.png (255×70)

若是 opacity 值没给的话，预设会用 0；这样表示是透明(transparent)喔：

您可能想查找下面的文章:

相关文章

2017-06-02用css3实现当鼠标移进去时当前亮其他变灰效果
2017-06-02利用CSS的Sass预处理器（框架）来制作居中效果
2017-06-02CSS3 please 跨浏览器的CSS3产生器
2017-06-02CSS3 完美实现圆角效果
2017-06-02CSS3 简单又实用的5个属性
2017-06-02CSS中的字体大小设置属性总结
2017-06-02CSS3 实用技巧：实现黑白图像效果示例代码
2017-06-02CSS3教程：background-clip和background-origin
2017-06-02让IE6、IE7、IE8支持CSS3的脚本
2017-06-02简单掌握CSS3将文字描边及填充文字颜色的方法