CSS颜色和背景详解- 背景颜色 - 背景图片 - (color background-color background-image...)

颜色

颜色表达式

1.RGB：rgb(red,green,blue)：每个参数定义了0-255之间的颜色强度。

举例：   rgb(255,0,0) // 红色   rgb(0,0,0) // 黑色   rgb(255,255,255) // 白色

2.RGBA：rgba(red,green,blue,alpha)：alpha是0-1透明度设置。0完全透明，1不透明。

举例：   rgba(255,0,0,0) // 完全透明，没有颜色的红色   rgba(0,0,0,0.5) // 半透明的黑色   rgba(255,255,255,1) // 完全不透明的白色

3.HSL：hsl(hue,saturation,lightness)：色相（hue）是0-360的度数，120是绿色，240是蓝色；饱和度（saturation）是一个百分比值，0表示灰色阴影，100%是全色；亮度（lightness）是百分比，0表示黑色，50%是既不透明也不暗，100%是全色。

举例：   hsl(0,100%,50%) // 红色   hsl(240,100%,50%) // 蓝色   hsl(240,100%,0%) // 黑色   hsl(240,100%,100%) // 白色

4.HSLA：hsla(hue,saturation,lightness,alpha)：alpha是0-1透明度设置。0完全透明，1不透明。

举例：   hsla(0,100%,50%,0) // 完全透明，没有颜色的红色   hsla(0,100%,50%,1) // 红色

5.HEX：hex是使用十六进制值来指定颜色，格式为：#rrggbb，rr（红色），gg（绿色），bb（蓝色）是介于00-ff之间的十六进制值。

举例：   #ff0000 // 红色   #ffff00 // 黄色   #ffffff // 白色，也可以将两个相同的值合并，如#fff白色 #000黑色

6.颜色名称表示法。

举例：   red // 红色   green // 绿色   blue // 蓝色   pink // 粉红色

CSS颜色对照表

CSS 颜色代码大全 CSS颜色对照表

前景色

在CSS中，可以为任何元素设置前景色和背景色，从body到强调元素和超链接元素，再到几乎一切（列表项、整改列表、标题、表单元格，甚至从某种程度上图像也可以设置前景色和背景色）。不过要理解这是如何工作的，重要的是应当理解元素前景色中有什么，没有什么。

一般来说，前景色是元素的文本，不过前景色还包括元素周围的边框。因此有两种方式直接影响一个元素的前景色：可以使用color属性，也可以使用某个边框属性设置边框颜色。

<div class="div1">
  这是div1
</div>
<br />
<div class="div2">
  这是div2
</div>

.div1 {
  width: 300px;
  height: 300px;
  border-width: 5px;
  border-style: solid;
  color: red; /*前景色: 将前景色设置为红色，文字和边框都将是红色*/
  background-color: blue; /*背景色*/
}
.div2 {
  width: 300px;
  height: 300px;
  border-width: 5px;
  border-style: solid;
  border-color: green; /*给边框单独设置颜色，可以覆盖color属性的值，这时边框的颜色为绿色*/
  color: red; /*前景色*/
  background-color: blue; /*背景色*/
}

---

要设置一个元素的前景色，最容易的办法是利用属性 color。

color
值：	<color> | inherit
初始值：	用户代理特定的值
应用于：	所有元素
继承性：	有
计算值：	根据指定确定

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

h1 {
  color: #000000; /*黑色*/
}
h2 {
  color: #808080; /*灰色*/
}
h3 {
  color: #FF0000; /*红色*/
}
h4 {
  color: #800080; /*紫色*/
}
h5 {
  color: #008000; /*绿色*/
}
h6 {
  color: #0000FF; /*蓝色*/
}

---

背景色

元素的背景区包括前景之下直到边框外边界的所有空间；因此内容框和内边距都是元素背景的一部分，且边框画在背景之上。

CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

可以使用 background-color 为元素的背景声明一个背景色，它接受所有合法的颜色，还可以接受一个使背景透明的关键字 transparent 。

background-color
值：	<color> | transparent | inherit
初始值：	transparent
应用于：	所有元素
继承性：	无
计算值：	根据指定确定

设置背景色为纯色

background: #0000ff; /*不透明的蓝色*/

设置背景色为半透明颜色

background-color: rgba(0,0,255,0.5); /*不透明度为50%的蓝色*/

设置背景色为全透明

background-color: transparent; /*背景色完全透明*/

背景图像

background-image 属性

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

值	属性
url('URL')	指向图像的路径。
none	默认值。不显示背景图像
inherit	规定应该从父元素继承 background-image 属性的设置。

background-repeat 属性

background-repeat 属性设置是否及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-x	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-orgin 属性

background-orgin 属性规定 background-position 属性相对于什么位置来定位。

如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。

值	描述
padding-box	默认。背景图像相对于内边距来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

background-position 属性

background-position 属性设置背景图像的起始位置。

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素（0px 0px）或任何其他的CSS单位。 如果您仅规定了一个值，另一个值将是 50%。 您可以混合使用 % 和 positon 值。

background-size 属性

background-size 属性规定背景图像的尺寸。默认值是 auto。

语法

background-size: length | percentage | cover | contain;

值	描述
length	设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置成 "auto" 。
percentage	以父元素的百分比来设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置成 "auto" 。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域中。
contain	把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。。

background-attachment 属性

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。