购物车
登陆 / 注册
微信扫码登陆

CSS 颜色值

CSS 颜色值
颜色是由红(RED),绿(GREEN),蓝(BLUE )光线的显示结合。在CSS中定义颜色的方法有:十六进制色、RGB颜色、RGBA颜色、HSL颜色、HSLA颜色、预定义/跨浏览器颜色名。
编辑:前端控 前端控 更新时间:2019-01-19 16:07:13

CSS 颜色值

CSS 颜色

可以用以下方法来规定 CSS 中的颜色:

名称版本描述
<color>CSS1/CSS3用来表示颜色的关键字或者数值规则
Color Name
CSS1用颜色名称来指定颜色。包括基本颜色关键字、系统颜色、SVG颜色关键字等
HEXCSS1十六进制记法。语法如:#rrggbb或#rgb
RGBCSS2rgb记法
RGBACSS3rgba记法
HSLCSS3hsl记法
HSLACSS3hsla记法
transparentCSS1/CSS3全透明
currentColorCSS3当前颜色
十六进制颜色

所有主要浏览器都支持十六进制颜色值。

指定一个十六进制的颜色其组成部分是:#RRGGBB,其中RR(红色),GG(绿色)和BB(蓝色)。所有值必须介于0和FF之间。

实例:#0000FF值呈现为蓝色,因为蓝色的组成设置为最高值(FF)而其他设置为0

div{
	width:450px;
	height:300px;
	background-color:#0000ff;
	}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

RGB颜色

所有浏览器都支持 RGB 颜色值。

RGB 颜色值是这样规定的:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。

实例:rgb(255,0,0) 值显示为红色,这是因为 red参数被设置为最高值(255),而其他被设置为 0

div{
	width:450px;
	height:300px;
	background-color:rgb(255,0,0);
	}
</style>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

RGBA颜色

RGBA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

实例

div{
	width:450px;
	height:300px;
	background-color:rgb(255,0,0,0.5);
	}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 7.jpg

HSL 颜色

HSL 颜色值得到以下浏览器的支持:IE9+、Firefox、Chrome、Safari 以及 Opera 10+。

HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。

HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。

Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色

实例

div{
	width:450px;
	height:300px;
	background-color:hsl(120,65%,75%);
	}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 8.jpg

HSLA颜色

HSLA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

HSLA 颜色值是 HSL 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

HSLA 颜色值是这样规定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字

实例

div{
	width:450px;
	height:300px;
	background-color:hsl(120,65%,75%,0.7);
	}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 9.jpg

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
文章列表
教程文档
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号