CSS3顏色模塊詳解

1、css3顏色模塊詳解css2.1時代可以用法4種辦法表示色彩，即挺直用法色彩名（如red、blue）、rgb值（如rgb(255,0,0)）、rgb百分比（如rgb(100%,0%,0%)）或者十六進(jìn)制數(shù)（如ff0000）；而表示透亮度需要用法opacity屬性或透亮。隨著css3的出生，我們可以利用hsla或者rgba挺直定義色彩和透亮效果。 透亮度：opacity 在css3浮現(xiàn)之前，只能通過某些掃瞄器的特別屬性實現(xiàn)元素的透亮度效果?，F(xiàn)在，通過opacity屬性，我們可以便利地設(shè)置元素的透亮度。 為元素設(shè)置透亮度后，它下方的元素就能夠部分顯示出來。 opacity應(yīng)用的經(jīng)典案例是按鈕淡入淡

2、出的實現(xiàn)。它的原理是將按鈕一般狀態(tài)效果和按鈕懸停（hover）狀態(tài)效果疊加放在一起，懸停效果放在上層，但是透亮度設(shè)置為0。當(dāng)鼠標(biāo)懸停到按鈕上時，將上層懸停效果透亮度由0漸變到1；當(dāng)鼠標(biāo)移出時，再將上層懸停效果透亮度由1漸變到0， 采納opacity實現(xiàn)按鈕淡入淡出效果的完整代碼如下所示： html5 gradient height:27px; width:27px; background:url(button_bg.png),url(search.png)centercenterno-repeat; gradientspan height:100%; width:100%; display:b

3、lock; background:url(button_bg_hover.png),url(search.png)centercenter no-repeat; opacity:0; gradient:hoverspan opacity:1; transition:allease-in0.2s;/*在懸停時用法動畫效果轉(zhuǎn)變透亮度*/ 當(dāng)鼠標(biāo)懸停在按鈕上時，按鈕將會根據(jù)從左向右的效果變幻，并顯示為終于的懸停效果： 在上面的代碼中，我們用到了css3的一個重要屬性transition，請繼續(xù)關(guān)注其它文章，我們將在后面向它舉行講解。 hsl hsl是工業(yè)界一種色彩標(biāo)準(zhǔn)，h、s、l分離表示色調(diào)、飽和度

4、和亮度，它幾乎包括了人類視覺所能感知的全部色彩，是目前運(yùn)用最廣的色彩系統(tǒng)之一。css3添加了對此標(biāo)準(zhǔn)的支持，在rgb之外提供了另外一種色彩的表現(xiàn)方式。 用法hsl，可以基于色調(diào)、飽和度和亮度舉行調(diào)整。 例如下圖中的三種色彩具有同樣的色調(diào)和飽和度，僅僅是亮度方面有所差別。用法hsl，調(diào)整色彩的色調(diào)、飽和度和亮度就相當(dāng)簡單了，不需要再去計算rgb的值。 hsla和rgba 顧名思義，hsla就是hsl加上alpha通道（即透亮度），我們可以用hsla為hsl色彩設(shè)置透亮度。在任何用法色彩的地方都能用法hsla，如背景、邊框、盒陰影里。當(dāng)hsla中a的值等于1時，效果和hsl徹低一樣。 rgba同hsla一樣，代表rgb和透亮度的結(jié)合。它和css2.1的rgb值用法辦法相同，前三個值可以是數(shù)值，也可以是百分比，第四個值是透亮度，透亮度值為1的元素是徹低不透亮的，為0的元素是徹低透亮的。 rgba的用法辦法如下面的代碼所示： .box1 background:rgba(0,0,255,1);/*藍(lán)色，透亮度為100%，徹低不透亮*/ .box2 background:rgba(100%,50%,0%,0.5);/*橙綠色，透亮度為50%*/ 在background屬性中用法rgba的示例css代碼為如下： background:linear-grad