CSS 背景重复

下文笔者讲述使用CSS将设置背景图片是否重复的效果，如下所示

CSS background-repeat属性简介

  如果一个背景图片未设置 背景重复的属性时
    此时背景图片会延水平和垂直两个方向重复
  此时如果你需要重复图片：只按一个方向重复，或不重复 那么此时就需要使用background-repeat属性

background-repeat属性值说明:
  repeat:默认值，水平和垂直方向重复
  repeat-x:按x方向重复
  repeat-y:按y方向重复
  no-repat:不重复
  inherit:从父元素上继承background-repeat属性 

例

body {
  background-image: url("test_bg.png");
}

例:按x方向重复背景图片

body {
  background-image: url("test_bg.png");
  background-repeat: repeat-x;
}

例2:不重复背景图片

CSS background-repeat: no-repeat
background-repeat 属性还可指定只显示一次背景图像：

背景图像只显示一次：

body {
  background-image: url("test.png");
  background-repeat: no-repeat;
}

background-position常结合background-image及background-repeat一起使用

 
CSS background-position
    background-position属性:
	  用于指定背景图像的位置 

例
将背景图片的右上角放入html元素上

body {
  background-image: url("test_bg.png");
  background-repeat: no-repeat;
  background-position: right top; 
}