前言

如果网页只有一种颜色,那是非常可怕的。 色彩的设置丰富了网页,犹如一个多彩的世界。

在了解css颜色之前,我们先回顾一下计算机是如何显示颜色的? 计算机根据颜色和光三基色的原理,通过各种算法来显示颜色。

css 颜色 – 颜色

网页中使用颜色关键字、十六进制字符、rgb、rgba等来表示红、绿、蓝的混合颜色,如下例所示。 几种写法都指同一种颜色(红色):

color:red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)

对于十六进制形式,每2位代表一种颜色,从左到右分别是红、绿、蓝,每种颜色的取值范围是00到FF。

例子:

color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*红色*/
color: #00ff00; /*绿色*/
color: #0000ff; /*蓝色*/

对于rgb的表示,它由三个参数组成,分别是红、绿、蓝,每种颜色取0到255之间的值。

例子:

color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*红色*/
color: rgb(0,255,0); /*绿色*/
color: rgb(0,0,255); /*蓝色*/

将 0 到 255 之间的红、绿、蓝值组合起来,总共可产生超过 1600 万种不同的颜色 (256 x 256 x 256)。

但大多数现代显示器至少能够显示 16384 种颜色。 因此,在使用颜色时要特别注意,避免设置无法显示的颜色。 您可以参考网页安全色:。

颜色除了红绿蓝三基色外,还有亮度等级,如下图所示:

代码颜色表_代码颜色大全_html颜色代码

rgba中的a指的是透明度,是css3新增加的属性,通过rgba可以设置更漂亮的颜色。

CSS 背景 –

元素的背景颜色和背景图片可以通过属性来设置。 语法如下:

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

在一条语句中设置所有背景属性,您可以在其中设置以下属性:

每个值均以空格分隔,无特定顺序。 有可能只允许某些值,例如:允许#url(img.png),但至少允许一个值。

建议使用缩写属性,这样可以更好地兼容旧浏览器,并节省大量代码。 当然,你也可以单独使用它们,例如:

background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;

1.背景颜色——-color

-color 与之前提到的颜色相同,可以使用十六进制、rgb、rgba等来设置颜色。 示例如下:




body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}



背景色1

背景色2

背景色3

背景色4

如下图所示:

代码颜色大全_代码颜色表_html颜色代码

注意:-颜色:; 指透明色,不显示任何颜色。

2.背景图片的使用——-图片

在html元素中添加背景图片在早期的网页制作中被广泛使用,但如今已不再建议广泛使用。 示例如下:

body {background-image:url(/static/bg.gif);}

这里使用125*125尺寸的图片,如下:

代码颜色大全_html颜色代码_代码颜色表

但你会发现整个网页都被图片覆盖了,而上面的代码默认会从左到右、从上到下覆盖整个页面。 如果不想平铺,可以使用-设置。

背景图片 您可以同时设置多张背景图片,如下:

background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);

多张图片以逗号分隔,多张图片会叠加在页面上,第一张图片显示在顶部。

效果如下:

代码颜色大全_html颜色代码_代码颜色表

3.背景重复法—— –

它具有以下属性:

默认。 背景图像将垂直和水平重复。

-X

背景图像将水平重复。

-y

背景图像将垂直重复。

不-

背景图像不重复。

继承自父元素-属性的设置。

示例如下:

代码颜色大全_html颜色代码_代码颜色表

4.背景图片的位置——-

背景图片默认显示在左上角,语法如下:

background-position: x y; // x 距离左边距离,y距离顶部距离

如果你想改变它的位置,你可以使用关键字:top, , left, right 和; 或使用长度值,例如 100px 或 5cm; 您还可以使用百分比值。

x 可以取值 | 价值| 左| | 正确的。

y 可以取值百分比|数值|顶部||。

当仅设置一个值时,另一个值将默认为 。

使用关键字使背景图像水平和垂直居中:

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 

代码颜色大全_html颜色代码_代码颜色表

使用百分比%:

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%; 

50% 50% 相当,显示效果与上图相同。

您还可以使用特定值,例如 px、em、cm 等。

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px; 

显示效果如下:

代码颜色大全_代码颜色表_html颜色代码

5.背景图像相对于容器的参考点—— –

就是设置背景图片相对于html元素的位置为初始坐标点。 句法:

background-origin: padding-box|border-box|content-box;

几个有价值的意义:

-盒子

背景图像相对于填充框的位置

-盒子

背景图像相对于边界框的位置

-盒子

背景图像相对于内容框的位置

示例如下:

代码颜色大全_html颜色代码_代码颜色表

6.背景图片大小——-size

默认显示背景图像的原始尺寸。 您可以使用此属性来设置元素上背景图像的大小。 句法:

background-size: width height;

宽度和高度可以使用数值、百分比、覆盖率等;

值:可以使用任何单位的数字,例如 px、em、cm 等。如果设置了一个值,则第二个值是“auto”。

百分比%:相对于所在html原始宽度和高度。 如果设置了一个值,则第二个值是“auto”。

cover:将背景图片扩大到足够大的尺寸,使背景图片完全覆盖背景区域。 背景图像的某些部分可能不会显示在背景锚点区域中。

:将背景图像扩展至最大尺寸,使其宽度和高度完全适合内容区域。

例子:

代码颜色表_代码颜色大全_html颜色代码

7. 背景图像是固定的还是与页面的其余部分一起滚动?

– 该属性具有以下值:

背景图像与页面的其余部分一起滚动。这是默认设置

固定的

背景图像是固定的

指定 – 的设置应从父元素继承

当地的

背景图像随滚动元素滚动

例如,设置不跟随页面滚动的固定背景图片:

background-attachment:fixed;

代码颜色表_代码颜色大全_html颜色代码

滚动滚动条,背景图像将始终固定在屏幕上的该位置。

8.背景绘图区——-clip

语法如下:

background-clip: border-box|padding-box|content-box;

-盒子

默认值。 背景绘制在边框框内(夹入边框框)。

-盒子

背景绘制在填充框内(剪辑到填充框内)。

-盒子

背景绘制在内容框内(剪辑到内容框内)。

此属性类似于 – ,不同之处在于它会裁剪背景图像,如下例所示:

html颜色代码_代码颜色表_代码颜色大全

html颜色代码_代码颜色表_代码颜色大全

9.背景层混合模式——-blend-mode

所谓混合模式就是将图片和颜色或者图片和图片进行混合,语法:

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

适当的价值:

代码颜色表_html颜色代码_代码颜色大全

示例如下:

html颜色代码_代码颜色大全_代码颜色表

正常模式

代码颜色大全_代码颜色表_html颜色代码

亮度模式

代码颜色表_代码颜色大全_html颜色代码

颜色 颜色模式

您可以自行尝试其他模式,看看有什么不同。

到目前为止,我们已经学会了如何使用颜色和背景,尤其是背景的使用。 由于它有很多属性,所以可以缩写,也可以单独写。 如果你想完全掌握它,你需要多练习。 让我们看看如何结合使用每个属性的效果。

一般建议使用简写,主要是可以少写很多代码。 以上介绍难免有错误或不完整的地方,欢迎指出错误并进行补充。

好了,今天的主题就讲到这里吧,不管如何,能帮到你我就很开心了,如果您觉得这篇文章写得不错,欢迎点赞和分享给身边的朋友。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注