CSS背景样式

背景图像样式background-image

background-image:url("图像地址");

• 图像地址可以是相对地址，也可以是绝对地址；给某个元素设置背景图像，元素要有一定的宽度和高度，背景图片才会显示出来。

背景重复样式background-repeat

• 在CSS中，使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺。

background-repeat属性取值:
no-repeat   表示不平铺
repeat      默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺
repeat-x    表示在水平方向（x轴）平铺
repeat-y    表示在垂直方向（y轴）平铺

• 注意：设置有背景图片的元素的宽或高大于背景图片本身的宽或高，才会有平铺效果。

背景图片位置background-position

• 背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。

语法：background-positon:像素值/关键字;
说明：语法中的取值包括两种，一种是采用像素值，另一种是关键字描述。

• 1、background-position取值为“像素值”
  • background-position取值为像素值时，要设置水平方向数值（x轴）和垂直方向数值（y轴）。例如：“background-position：12px 24px;”表示背景图片距离该元素左上角的水平方向位置是12px，垂直方向位置是24px。注意，这两个取值之间要用空格隔开。
• 2、background-position取值为“关键字”

background-position属性的关键字设置值
属性值 说明
top left    左上
top center  靠上居中
top right   右上
left center 靠左居中
center center   正中
right center    靠右居中
bottom left 左下
bottom center   靠下居中
bottom right    右下

• 当background-position取值为关键字时，也需要设置水平方向和垂直方向的值，只不过值不是使用px为单位的数值，而是使用关键字代替。