CSS3 HSL colors 使用说明

HSL是一个选择颜色的很直观的方法。如果你需要“再暗一点点儿” 或 “再亮一点点儿”,使用十六进制组合会颇麻烦吧。幸运的是,通过HSL,它就是仅仅一个简单的数字改变。

HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色调,饱和度,亮度三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。

语法:<length> <percentage> <percentage> 例如:div {background: hsl(30, 50%, 80%);}

HSL代表Hue(色调、也称“色相”)、Saturation(饱和度)和Lightness(明度)。Hue就是一个色盘中的颜色(参考上图)。色彩选择通过度数来确定,0º 就是红色,120º 是绿色,而240º 就是蓝色。当然,你可以选择中间的不同的色彩组合,这样你就有这些:

Saturation(饱和度)是该色彩被使用了多少。0%表示灰度,也就是我们并没有使用这个颜色,而100%表示该颜色很饱满。通俗的讲,饱和度就是颜色的深浅程程度,鲜艳程度 Lightness(明度)也就是该色彩有多亮。较低设置意味着暗,较高设置意味着亮,0% 和100%意味着分别为黑和白。

HSL被大部分浏览数支持,包括Safari 3.2+、Chrome、Firefox、Opera 9.6+,IE不支持。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>HSL colors</title> </head> <body> <div style="background-color: hsl(240,100%,50%);color:white;">在Firefox的浏览器里能看到蓝色背景</div> </body> </html>

时间: 2024-12-11 07:53:05

CSS3 HSL colors 使用说明的相关文章

CSS3 HSLA colors使用说明

前面我们讲一了篇关于<CSS3 HSL colors 使用说明>的文章,这里我们再说说css中别一个颜色相关的属性:CSS3 HSLA colors 其语法为: <length> <percentage> <percentage> <opacity>各个属性跟我们前说的HSL相同,有别之处是加了一个:opacity,其意思为: alpha(透明度). 取值在0到1之间:HSLA是在HSL的基础上增加一个透明度(A)的设置. 当然,HSLA 就是H

CSS3 RGBA colors使用说明

RGBA是对原始的RGB的扩展,它加入了第四个参数:alpha通道.alpha通道参数采用0 到1之间的小数,就像opacity那样.使用RGBA而不是opacity的优势是,当使用RGBA的时候,透明不会被应用到子元素.这也就一位着,你可以在一个透明对象里面使用一个完全不透明的子对象,而当你使用opacity的时候,透明对象的子元素也是透明的. RGB色彩模式(也翻译为"红绿蓝",比较少用)是工业界的一种颜色标准,是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间

css3 Background-size属性使用说明

昨天做了一个ipad版的用户协议,顶部和底部各有一个小banner,ipad有横版和竖版,两版宽度不一样,所以两个banner的宽度也不一样. 为了减少使用image,我用到了Background-size来自适应div的宽度. background-size的类型 background-size需要两个值,它的类型可以是像素(px).百分比(%)或是auto,还可以是cover和contain.第一个值为背景图的width,另外一个值用于指定背景图上的height,如果只设定1个值,则第2个默

CSS3 RGBA等于RGB加上opacity吗?

在我们前端设计里有两篇教程: CSS3 RGBA colors使用说明 css3中opacity属性学习与实践,他们公别介绍了RGBA,RGB,opacity的用法,这里我们把这三个属性放在一起来考虑:CSS3 RGBA等于RGB加上opacity吗? 请别先回答,我们接下来分析分析. 以前我们经常会碰到这样一个问题,设置了一个div的opacity(透明度)以后,这个div层里的内容也跟着透明了,特别是文字,一透明就离我们想要的效果差很远了,显示这不是我们需要的.以前我遇风这种情况通常是把透明

CSS3中HSL和HSLA的简单使用示例

  使用CSS3 HSL声明同样是用来设置颜色的.下一个呢? HSLA? 是的,这个和RGBA的效果是一样的. HSL声明使用色调Hue(H).饱和度Saturation(s)和亮度Lightness(L)来设置颜色. Hue衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色. Saturation值是一个百分比:0%是灰度,100%饱和度最高 Lightness值也是一个百分比:0%是最暗,50%均值,100%最亮. 随想:为什么是"ligntness"呢?或许我更习惯P

CSS3系列教程

使用CSS3 HSL声明同样是用来设置颜色的.下一个呢? HSLA? 是的,这个和RGBA的效果是一样的. HSL声明使用色调Hue(H).饱和度Saturation(s)和亮度Lightness(L)来设置颜色. Hue衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色. Saturation值是一个百分比:0%是灰度,100%饱和度最高 Lightness值也是一个百分比:0%是最暗,50%均值,100%最亮. 随想:为什么是"ligntness"呢?或许我更习惯Pho

css3.0的新属性的参考列表

文中的图表让我们对于每一个浏览器对css3.0新属性的支持情况一目了然,通过升级firfox.Chrome.Safari.Opera浏览器的版本是可以做到支持css3.0属性的,但ie浏览器的升级版本还是无法很好的支持css3.0的新属性! zenelements.com网站对部分css3.0新属性进行了整理总结,并对相应新属性在各个浏览器的支持情况做了一个图表 ,让我们对于每一个浏览器对css3.0新属性的支持情况一目了然! 从以下列表可以看出,通过升级firfox.Chrome.Safari

10 个实验性的 JS/CSS3 编程技术

本文所介绍的编程技术,可以有效地改善用户体验和设计师的工作流程,替代原先在IE6上使用的旧的解决办法.需要注意的是,下面列出的大部分技术还在实验阶段,而且有些不是纯CSS技术(一些使用jQuery或其它JavaScript库).但本文还是非常值得一看.  1.  告别overflow:hidden  让我告别overflow:hidden的决定性因素是CSS3,具体而言是box-shadow.因为使用overflow:hidden首先 会对box-shadow造成负面影响.当父元素使用overf

css3 border-image使用说明

在看这个属性时,好像国内的文章都没给大家说太明白,今天就一起说说 首先来一个素材图片whiteButton.png   然后我们要做成这样的效果:   代码(呵呵!请不要急,继续向下看):   -moz-border-image: url(images/whiteButton.png) 0 12 0 12 round stretch;  border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;  display: b