當前位置：
首頁 >
CSS3--5.颜色属性
發布時間：2023/11/30
63
豆豆
生活随笔
收集整理的這篇文章主要介紹了
CSS3--5.颜色属性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML5中添加了一些新的顏色的表示方式
1.RGBA：說得簡單一點就是在RGB的基礎上加進了一個通道Alpha。RGBA在RGB的基礎上多了控制alpha透明度的參數。以上R、G、B三個參數，正整數值的取值范圍為：0 - 255。百分數值的取值范圍為：0.0% - 100.0%。超出范圍的數值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分數值。A參數，取值在0~1之間，不可為負值。RGBA比元素設置CSS的透明度更好，因為單獨的顏色可以在不影響整個元素的透明度，他不會影響到元素其他的屬性，比如說邊框，字體同時也不會影響到其他元素的相關透明度
a)語法:
?R：紅色值。正整數 | 百分數
?G：綠色值。正整數 | 百分數
?B：藍色值。正整數| 百分數
?A：透明度。取值0~1之間
b)使用示例：
div{width: 200px;height: 200px;background-color: rgba(10,20,245,0.5);color: white;
}
2. HSLA(H,S,L,A)：
a)此色彩模式與HSL相同，只是在HSL模式上新增了Alpha透明度
b)語法：
?H：Hue(色調,色相)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 – 360,過渡為：(紅橙黃綠青藍紫紅)
?S：Saturation(飽和度)。取值為：0.0% - 100.0%
?L：Lightness(亮度)。取值為：0.0% - 100.0%，50%是平衡值
?A：Alpha透明度。取值0~1之間。
c)示例
span{width: 200px;height: 200px;display: block;background-color: hsla(360,100%,50%,0.6);color: white;
}
3.關于透明度的補充說明：
a)opacity只能針對整個盒子設置透明度，子盒子及內容會繼承父盒子的透明度
b)transparent 不可調節透明度，始終完全透明
c)使用rgba 來控制顏色，相對opacity ，不具有繼承性 <style>*{padding: 0;margin: 0;}div{width: 200px;height: 200px;border: 1px solid #ccc;/*1.使用預設了值*/background-color: red;}</style>
</head>
<body><div>這是內容</div>
</body> /*2.使用顏色拾取器*/
background-color: #c9ffa6; /*rgb(紅，綠，藍)*/
background-color: rgb(255,150,0); /*hsl(顏色(0~360)，飽和度(0%~100%)，明度(0%~100%))*/
/*明度默認是50%,一般建議保留50的值*/
background-color: hsl(300,100%,50%); /*h5中的顏色設置*/
/*rgba(紅色，綠色，藍色，透明度)透明度：0代表完全透明 1代表完成不透明 不會影響子元素*/
background-color: rgba(255,0,255,0.2);
轉載于:https://www.cnblogs.com/Tobenew/p/10525092.html
總結
以上是生活随笔為你收集整理的CSS3--5.颜色属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 成都欢乐谷所有项目都免费吗
- 下一篇： CSS清除默认样式，成功入职腾讯