本文主要包含CSS3,颜色等相关知识,佚名 希望在学习及工作中可以帮助到您
rgba 颜色
原本 CSS 中的颜色除了可用 16 进位来表示 RGB 颜色值之外，还可以使用预先定义好的颜色名称。而 RGBA 是以 RGB 为基础再加上不透明度的属性。
- rgba(red, green, blue, opacity)
其中的 red、green 及 blue 等颜色值是用 10 进位或是百分比(%)的方式来表示，允许的值为 0 到 255 之间的整数值；而 opacity 不透明度允许的值为 0 到 1 之间带有小数的数值。
快速的看一下实际的范例：
- <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>
接着换 CSS：
- div {
- width: 220px;
- height: 50px;
- float: left;
- margin-right: 10px;
- line-height: 50px;
- text-align: center;
- border: 1px solid #000;
- }
基本用法：
- .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);
- }
除了给实际的颜色值之外，也可以用百分比(%)来表示：
- .rgba2 {
- background-color: rgba(100%, 100%, 0%, 0.75);
- }
若是 opacity 值没给的话，预设会用 0；这样表示是透明(transparent)喔：