关于CSS background

CSS背景属性

值	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。

background-color

background-color 属性定义了元素的背景颜色，页面的背景颜色使用在body的选择器中。

常用颜色代码：

1、常用颜色单词，比如green（绿色），yellow（黄色），red（红色），transparent（透明色）等；

2、以#号开头的六个字符组成的颜色代码，比如：#FF0000（红色），#000000（黑色），#F9F900（黄色）等；

3、颜色rgb值，表达方式：rgb(参数1，参数2，参数3)，如：“rgb(255,0,0)”，三个参数分别表示r，g，b

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数

如：

Test

div 
color
div 

效果：

background-image

background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

属性的值

值	描述
url(‘URL’)	图像的URL
none	无图像背景会显示。这是默认
linear-gradient()	创建一个线性渐变的 “图像”(从上到下)
radial-gradient()	用径向渐变创建 “图像”。 (center to edges)
repeating-linear-gradient()	创建重复的线性渐变 “图像”
repeating-radial-gradient()	创建重复的径向渐变 “图像”
inherit	指定背景图像应该从父元素继承

例：

 
 




Hello World!

效果：

background-position

background-position 属性设置背景图像的起始位置。这个属性设置背景原图像的位置，背景图像如果要重复，将从这一点开始。

属性值

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

如：

body
{ 
  background-image:url('/1.gif');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}

效果: