css颜色与透明度

摘要:
#0000ff蓝色十六进制颜色表示由6个数字或字母组成。透明度通过在前面添加2位数字来表示,值为00-FF。亮度也是一个百分比值;0%为黑色,100%为白色。rgba设置的透明度不会被子元素继承;不透明度设置的透明度由子元素继承。

 

1、  css颜色

css颜色由红、绿、蓝三种基色叠加而来。

1.1   rgb:

rgb(red、green、blue)三原色组成,根据这三种颜色组合的不同发光度获取。取值0-255,每个值有256阶,由低到高,0最低,255最高。那总共的组合数是:256×256×256=16777216 种颜色。

示例:rgb(0,0,0) 黑色,rgb(255,0.0) 红色,rgb(255,192,203) 粉红色

1.2   rgba:

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

示例:rgba(47,222,151,0.3)

1.3   十六进制色

十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。

示例:#000000黑色,css中可以缩写为#000。#ffffff/#fff 白色。#0000ff 蓝色

十六进制颜色表示法6位数字或字母组成,前面加2位表示透明度,取值00-FF。

示例:#7F0000ff 50%透明

透明度参照表:

00%

FF(不透明)

50%

7F

5%

F2

55%

72

10%

E5

60%

66

15%

D8

65%

59

20%

CC

70%

4c

25%

BF

75%

3F

30%

B2

80%

33

35%

A5

85%

21

40%

99

90%

19

45%

8c

95%

0c

 

 

100%

00(全透明)

1.4   hsl颜色

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

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

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

1.5   hsla颜色

HSLA 颜色值是 HSL 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。HSLA 颜色值是这样规定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

2、  opacity透明度

颜色的透明度前面已经介绍过,在css中opacity设置html元素的透明度。

  • opacity: value|inherit;

value

规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。

inherit

应该从父元素继承 opacity 属性的值。

rgba的设置的透明度不会被子级元素继承;opacity设置的透明度会被子级元素继承。

 

css颜色与透明度第1张css颜色与透明度第2张
<!DOCTYPE html>

<html>

<head>

<style>

div

{

 width:200px;

 margin:20px;

 padding:10px;

}

.d1

{

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

}

.d2

{

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

 opacity:0.5;

 filter:alpha(opacity=100); /* For IE8 and earlier */

}

</style>

</head>

<body>

<div class="d1">RGBA</div>

<div class="d2">opacity 字体也变透明了</div>

</body>

</html>
View Code

css颜色与透明度第3张

 

 

免责声明:文章转载自《css颜色与透明度》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Jeecg2.3 打包Java代码自动部署下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

CSS——(1)基础

CSS(Cascading Style Sheets)层叠样式表 含义一种计算机语言; 可以实现网页与内容分离; 用来表现文件样式,如HTML或XML; 比较 div与css 如果说div是容器的话,那么css就是装饰或是表现容器样式的事物。比如div是盒子,那么css的作用就是表示盒子的颜色,大小,体积等。 html与css html是负责网页...

CSS媒体查询

格式(style:{})元素设置: body{background-color:#0033FF; } /*媒体查询:当页面宽度最大为960px时*/@media screen and (max- 960px){ /*body背景颜色为*/body{ background-color:#FF6699...

less的基本用法

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量,继承,运算, 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行 (借助 Node.js)。 使用方式 两种使用方式:第一种全局安装less,利用命令编译less;第二种直接引入less.js. npm安装 npm instal...

css color

色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 255(十六进制 FF)。 十六进制值使用三个双位数来编写,并以 # 符号开头。 CSS 颜色 可以用以下方法来规定 CSS 中的颜色: 十六进制色 RGB 颜色 RGBA 颜色 HSL 颜色 HSL...

CSS 设置背景透明度,不影响子元素

由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example 1 .classname { 2 /*RGBa, 透明度0.6 */ 3 background:rgba(0, 0, 0, 0.6); 4 } 2> 使用 opacity, 设置一个背景DIV,此DI...

LESS 用法入门

本文旨在加深对 LESS 的理解和记忆,供自己开发时参考。相信对没有接触过 LESS 的程序员还是有用的,大佬绕路。 一、安装和使用 LESS 1.1 安装 使用命令行安装 LESS  npm install -g less 1.2 使用 less 有多种的使用方法,在这里我向大家介绍最常用的俩种方法。 第一种是直接在浏览器中使用: 去下载一个你要的le...