CSS 合法颜色值(CSS的颜色值正确的表达形式)

CSS Colors

CSS的颜色可以通过以下方法指定:

  • 十六进制颜色

  • RGB颜色

  • RGBA颜色

  • HSL色彩

  • HSLA颜色

  • 预定义/跨浏览器的颜色名称


十六进制颜色

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

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

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

实例

p

{

background-color:#ff0000;

}


RGB颜色

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

RGB颜色值指定:RGB(红,绿,蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,可在0和255之间,或一个百分比值(从0%到100%)之间的整数。

例如RGB(0,0,255)值呈现为蓝色,因为蓝色的参数设置为最高值(255)而其他设置为0。

此外,下面的值定义相同的颜色:RGB(0,0,255),RGB(0%,0%,100%)。

实例

p

{

background-color:rgb(255,0,0);

}

尝试一下 »


RGBA颜色

RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。

RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。

RGBA颜色值指定:RGBA(红,绿,蓝,alpha)。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。

实例

p

{

background-color:rgba(255,0,0,0.5);

}


HSL颜色

IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。

HSL代表色相,饱和度和亮度 - 使用色彩圆柱坐标表示。

HSL颜色值指定:HSL(色调,饱和度,明度)。

色相是在色轮上的程度(从0到360)-0(或360)是红色的,120是绿色的,240是蓝色的。饱和度是一个百分比值;0%意味着灰色和100%的阴影,是全彩。亮度也是一个百分点;0%是黑色的,100%是白色的。

实例

p

{

background-color:hsl(120,65%,75%);

}

尝试一下 »


HSLA颜色

HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.

HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。

指定HSLA颜色值:HSLA(色调,饱和度,亮度,α),α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。

实例

p

{

background-color:hsla(120,65%,75%,0.3);

}

尝试一下 »


预定义/跨浏览器的颜色名称

147是在HTML和CSS颜色规范预定义的颜色名称。你可以查看我们的预定义颜色名称表。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

免责声明:本文作者:“爱音乐的程序员小新人”,版权归作者所有,观点仅代表作者本人。本站仅提供信息存储分享服务,不拥有所有权。信息贵在分享,如有侵权请联系ynstorm@foxmail.com,我们将在24小时内对侵权内容进行删除。
(142)
PPT办公技巧:查询16进制色值以及为形
上一篇 2024年01月11日
xperia arc(那为什么基本没什么
下一篇 2024年01月11日

相关推荐

  • lenovo昭阳(联想e42进入bios设置)

    1、首先我们打开电脑电源。当我们的电脑屏幕上出现画面“Lenovo”时,我们迅速按下键盘上的“F2”键,就可以进入BIOS设置了;...

    2023年11月03日
  • 红花郎酒价格表(2012年产红花郎现价多少)

    《酱香典范·红花郎》红花郎酒是四川郎酒集团有限责任公司重点推出的系列酒之一。具有酒质香浓、醇厚、味陈、甜爽、尾净舒适、风格优美的特点。新开发的产品在保证原有酒质和风格特点的基础上,在包装上进行了大胆创新,以其新颖独特的包装设计,突破了传统,开...

    2023年11月07日
  • 三星盖世三(三星盖世三I9300的详细配置)

    2.内存:总内存16GB,显示总空间为11.35GB。总RAM约1GB;外置存储卡:最大支持64GBmicroSD卡。...

    2023年11月08日
  • 迷你usb无线网卡(我的E430电池槽里面插无线网卡有用吗)

    一般是没用的。那个是预留的SIM卡槽,一般本子上不带3G上网模块,所以是没有用的。无线网卡是终端无线网络的设备,是不通过有线连接,采用无线信号进行数据传输的终端。无线网卡根据接口不同,主要有PCMCIA无线网卡、PCI无线网卡、MiniPCI...

    2023年11月15日
  • 外汇交易模拟平台(最近应聘了外汇操盘手的职位)

    千万不要相信他们的话,都是套路!全世界做外汇交易员的很少,都是经过很系统的训练,不论是技术面还是基本面人家都是经过刻苦的学习训练,你想想你自己目前具备这样的素质么?真正的大公司或者基金,或者银行招聘外汇交易员,那都是要看你最近三个月或者一年,...

    2023年11月19日
  • 安卓4.4系统下载(444版本的手机)

    这个可以玩的游戏多了,可以直接在手机上阿紫个应用宝。里面的手机游戏很全面。可以通过种类找到喜欢的手机游戏,里面还有很多内侧的版本,可以提前玩玩。它上面的手机游戏都是官网的,是安全无毒的可以放心下载。...

    2023年11月23日
  • picturemotionbrowser(HEVC图像格式你知道多少)

    在升级iOS11之后,iPhone7及更新的设备内的照片存储将不再用JPEG了,而采用了一种新的图片格式HEIF(发音同heef),在iOS中对应的文件后缀为.heic,其编码用的是HEVC(这个发不了音,哈哈哈)格式,又称H.265(这个就...

    2023年11月23日
  • 租用高防ip(iPone新机和二手买哪个比较划算)

    不定能保证百分百没有失误。所以奉劝各位朋友在购买二手机前请一定要了解相关知识,购机需谨慎。下面是一些写给刚刚接触二手iPhone朋友的一些基本知识,如果你拿不准可以随时私聊我,全力帮你解疑答惑。...

    2023年11月23日
  • fritzchessbenchmark(9750差1000块)

    corei7-9750h和corei5-9300h之间的性能差距是多少?接下来,让我们简单地看一下基准性能运行点。...

    2023年11月24日
  • sony手机镜头(一加9r摄像头是索尼什么型号)

    一加9R手机的后置摄像头采用了索尼IMX586传感器,这是一款主流的4800万像素传感器,支持4K视频录制和慢动作视频拍摄功能。该传感器采用了1/2英寸的大尺寸设计和1.4um的大像素大小,能够有效提升照片的清晰度和细节表现,同时还配备了OI...

    2023年11月30日
返回顶部