當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3--5.颜色属性

發(fā)布時間：2023/11/30 CSS 49 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3--5.颜色属性小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

HTML5中添加了一些新的顏色的表示方式 1.RGBA：說得簡單一點就是在RGB的基礎上加進了一個通道Alpha。RGBA在RGB的基礎上多了控制alpha透明度的參數(shù)。以上R、G、B三個參數(shù)，正整數(shù)值的取值范圍為：0 - 255。百分數(shù)值的取值范圍為：0.0% - 100.0%。超出范圍的數(shù)值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分數(shù)值。A參數(shù)，取值在0~1之間，不可為負值。RGBA比元素設置CSS的透明度更好，因為單獨的顏色可以在不影響整個元素的透明度，他不會影響到元素其他的屬性，比如說邊框，字體同時也不會影響到其他元素的相關(guān)透明度 a)語法: ?R：紅色值。正整數(shù) | 百分數(shù) ?G：綠色值。正整數(shù) | 百分數(shù) ?B：藍色值。正整數(shù)| 百分數(shù) ?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(色調(diào),色相)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數(shù)值來指定顏色。取值為：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.關(guān)于透明度的補充說明： a)opacity只能針對整個盒子設置透明度，子盒子及內(nèi)容會繼承父盒子的透明度 b)transparent 不可調(diào)節(jié)透明度，始終完全透明 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>這是內(nèi)容</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);

轉(zhuǎn)載于:https://www.cnblogs.com/Tobenew/p/10525092.html

總結(jié)

以上是生活随笔為你收集整理的CSS3--5.颜色属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。