CSS背景

前言

 CSS背景属性可以给页面元素添加背景样式。背景属性设置背景颜色、背景图片、背景平铺、背景图片位置等。
 通过CSS背景属性，我们可以为网页元素设置丰富多彩的背景效果，从而增强页面的视觉吸引力和用户体验。

一、背景颜色

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

body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:十六进制 - 如：“#ff0000”

RGB - 如：“rgb(255,0,0)”

颜色名称 - 如：“red”

二、背景图片

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

body {background-image:url('1.gif');}

三、背景图片位置

让背景图像不影响文本的排版
利用background-position属性可以改变图片在背景中的位置

属性值	说明
Xpos Ypos	单位：px，Xpos表示水平位置，Ypos表示垂直位置
X% Y%	使用百分比表示背景的位置
X、Y方向关键词	水平方向的关键词：left、center、right。垂直方向的关键词：top、center、bottom

如下所示:

body
{
background-image:url('img_1.png');
background-position:right top;
}

四、背景平铺方式(匹配方式)

如果需要在HTML页面上对背景图像进行平铺，可以使用background-属性。

repeat	沿水平和垂直两个方向平铺
no-repeat	不平铺，只显示一次
repeat-x	只沿水平方向平铺
repeat-y	只沿垂直方向平铺

所示如下

body{      
background-repeat:repeat no-repeat  repeat-x  repeat-y ;
}

五、背景样式简写

background属性
所示如下:

background:red  url(../image/img1.gif) 205px 10px no-repeat;

六、总结

属性	作用	值
background-color	背景颜色	定义的颜色值/十六进制/RGB代码
background-image	背景图片	URL(图片路径)
background-repeat	平铺方式	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	Xpos Ypos/X% Y%/X、Y方向关键词
background	书写简单	背景颜色 背景图像 背景定位 平铺方式

背景图片实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置