【CSS】著色與透明

0002.jpg
  著色     

方法一:十六進(jìn)制

如:#3E8988 伸蚯、 #6600FF等等
其中,如果兩兩相同,可以簡寫
如:#6600FF 可以簡寫成 #60F



方法二:RGB(Red揩魂,Green,Blue)

這種顏色值由3個(gè)數(shù)組成炮温,每個(gè)數(shù)各代表一種色相(紅火脉、綠、藍(lán))柒啤,每個(gè)值可以使用百分百(0%100%)表示倦挂,也可以使用0255之間的數(shù)字表示。

如果想設(shè)置白色担巩,可以使用:
rgb(100%, 100%, 100%);
或者
rgb(255, 255, 255);



方法三:使用HTML傳統(tǒng)的顏色關(guān)鍵字(不建議經(jīng)常使用)

顏色關(guān)鍵字有17個(gè):
aqua方援、black、blue涛癌、fuchsia犯戏、gray、green祖很、lime笛丙、maroon、navy假颇、olive胚鸯、orange、purple笨鸡、red姜钳、silver、teal形耗、white哥桥、yellow。

除此之外激涤,大多數(shù)瀏覽器都支持SVG標(biāo)準(zhǔn)定義的147個(gè)顏色拟糕。

顏色關(guān)鍵字列表:
http://developer.mozilla.org/en-US/docs/Web/CSS/color_value

按色相分類的顏色列表:
http://html-color-codes.info/color-names/



方法四:RGBA(Red,Green倦踢,Blue送滞,Alpha)

相比起RBG,RGBA多了一個(gè)alpha通道辱挥,這個(gè)通道的作用是設(shè)定不透明度犁嗅。
設(shè)定不透明度的方法是,在RGB顏色后面再加一個(gè)介于0和1之間的數(shù)字晤碘。
0表示顏色不可見褂微,1表示顏色完全不透明(即功蜓,光線穿不透)。

color: rgba(255, 10, 20, .5)

這里的 .5 代表 0.5 的意思宠蚂,0可以省略不寫式撼。

不過RGBA有一個(gè)缺點(diǎn),就是 Internet Explorer 8 以及之前的版本都不支持肥矢。這個(gè)問題的解決方法是端衰,先使用RGB設(shè)定實(shí)心顏色,再使用RGBA設(shè)定透明顏色甘改。

color: rgb(255, 10, 20);    /* 針對 IE8 以及更早的版本  */
color: rgba(255, 10, 20, .5);    /* 針對較新的瀏覽器 */



方法5:HSL和HSLA(用得較少,也不那么好理解)

HSL(Hue灭抑,Saturation十艾,Lightness),Lightness有時(shí)也用Luminance表示腾节。
IE8及之前的版本不支持HSL忘嫉,不過其他所有瀏覽器都支持。

hsl() 有三個(gè)值案腺,
第一個(gè)值是角度庆冕,取值范圍是0~360,對應(yīng)色相圓劈榨。
紅色的色相是0(也是360访递,因?yàn)槔@完一周又回到原點(diǎn)),
黃色的色相值大約是50同辣,
橙色大約是100拷姿,
綠色大約150,
一次類推旱函,彩虹七色的色相之間大概相隔51度响巢。

第二個(gè)值是飽和度,即顏色的純度棒妨,取值范圍是0%~100%踪古。
0%表示完全不飽和,即暗灰券腔。
100%表示純色伏穆,鮮艷明亮。
其實(shí)不管色相(HSL的第一個(gè)值)是多少颅眶,只要飽和度為0%蜈出,得到的都是同樣的灰度。

第三個(gè)值是亮度涛酗,取值范圍是0%~100%铡原。
0%表示全黑偷厦。
100%表示全白。
如果想活的純色燕刻,亮度要設(shè)為50%只泼。

HSLA的A的使用方法和RGBA的A的使用方法差不多,在HSL后面加多一個(gè)Alpha值卵洗。




 透明     

transparent
這個(gè)值能把要設(shè)置的內(nèi)容變成絕對透明

如:

color: transparent;

opacity
這個(gè)方法能控制透明度

如:

background: red;
opacity: 0.5;



opacity可以控制整個(gè)元素的透明度请唱。如

div {
    background-color: red;
    color: blue;
    opacity: 0.5;
    filter:Alpha(opacity=50);
}

這時(shí),div的背景色过蹂,字體顏色的透明度都變成50%十绑,

filter:Alpha(opacity=50);
這句的作用是針對 IE8 以及更低版本的瀏覽器做兼容。



推薦網(wǎng)址:
http://hslpicker.com
www.colorlovers.com
http://paletton.com



HTML與CSS 目錄:HTML與CSS

上一篇:讓舊瀏覽器接受HTML5的語義標(biāo)簽

下一篇:【CSS】背景基礎(chǔ)知識

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末酷勺,一起剝皮案震驚了整個(gè)濱河市本橙,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌脆诉,老刑警劉巖甚亭,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異击胜,居然都是意外死亡亏狰,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進(jìn)店門偶摔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來暇唾,“玉大人,你說我怎么就攤上這事啰挪⌒挪唬” “怎么了?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵亡呵,是天一觀的道長抽活。 經(jīng)常有香客問我,道長锰什,這世上最難降的妖魔是什么下硕? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮汁胆,結(jié)果婚禮上梭姓,老公的妹妹穿的比我還像新娘。我一直安慰自己嫩码,他們只是感情好誉尖,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著铸题,像睡著了一般铡恕。 火紅的嫁衣襯著肌膚如雪琢感。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天探熔,我揣著相機(jī)與錄音驹针,去河邊找鬼。 笑死诀艰,一個(gè)胖子當(dāng)著我的面吹牛柬甥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播其垄,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼苛蒲,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了绿满?” 一聲冷哼從身側(cè)響起撤防,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎棒口,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體辜膝,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡无牵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了厂抖。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片茎毁。...
    茶點(diǎn)故事閱讀 38,814評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖忱辅,靈堂內(nèi)的尸體忽然破棺而出七蜘,到底是詐尸還是另有隱情,我是刑警寧澤墙懂,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布橡卤,位于F島的核電站,受9級特大地震影響损搬,放射性物質(zhì)發(fā)生泄漏碧库。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一巧勤、第九天 我趴在偏房一處隱蔽的房頂上張望嵌灰。 院中可真熱鬧,春花似錦颅悉、人聲如沸沽瞭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽驹溃。三九已至城丧,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間吠架,已是汗流浹背芙贫。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留傍药,地道東北人磺平。 一個(gè)月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像拐辽,于是被迫代替她去往敵國和親拣挪。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,728評論 2 351

推薦閱讀更多精彩內(nèi)容