中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

使用CSS3 HSL聲明同樣是用來設(shè)置顏色的。下一個呢？ HSLA？ 是的，這個和RGBA的效果是一樣的。

HSL聲明使用色調(diào)Hue(H)、飽和度Saturation(s)和亮度Lightness(L)來設(shè)置顏色。

• Hue衍生于色盤：0和360是紅色，接近120的是綠色，240是藍(lán)色。
• Saturation值是一個百分比：0%是灰度，100%飽和度最高
• Lightness值也是一個百分比：0%是最暗，50%均值，100%最亮。

隨想：為什么是”ligntness”呢？或許我更習(xí)慣Photoshop中的”Brightness”呢……

瀏覽器兼容性：

目前HSL和HSLA被Firefox、Google Chrome、和Safari瀏覽器較好的支持，而且不需要任何前綴

CSS3 HSL

上面的演示由以下樣式實現(xiàn)

div.hslL1 { background:hsl(320, 100%, 50%); height:20px; }
div.hslL2 { background:hsl(320, 50%, 50%); height:20px; }
div.hslL3 { background:hsl(320, 100%, 75%); height:20px; }
div.hslL4 { background:hsl(202, 100%, 50%); height:20px; }
div.hslL5 { background:hsl(202, 50%, 50%); height:20px; }
div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }

瀏覽器支持：

• √ Firefox(3.05+…)
• √ Google Chrome(1.0.154+…)
• √ Google Chrome(2.0.156+…)
• × Internet Explorer(IE7, IE8 RC1 )
• √ Opera(9.6+…)
• √ Safari(3.2.1+ windows…)

CSS3 HSLA

上面的效果由以下樣式實現(xiàn)：

div.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }

瀏覽器支持：

• √ Firefox(3.05+…)
• √ Google Chrome(1.0.154+…)
• √ Google Chrome(2.0.156+…)
• × Internet Explorer(IE7, IE8 RC1 )
• × Opera(9.6+…)
• √ Safari(3.2.1+ windows…)

本節(jié)原文：
http://www.zenelements.co.uk/blog/css3-hsl-hsla-color-opacity

特別聲明，本系列文章譯自：Zen Elements，非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate fromZen Elements, thanks Alex for his great work so much.

本文鏈接：http://www.95time.cn/tech/web/2009/6460.asp　

出處：前端觀察
責(zé)任編輯：bluehearts

上一頁 RGBA 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。