第五十一章背景-易看设计 - 专业设计师平台

背景是一个比较有助于我们，观察元素所占用面积的属性。但这依旧不是绝对的，因为在后面的章节，我们马上就会看到例外的情况。

背景（background）本身是一个复合属性，那么我们展开来讲解：

背景色 `background-color`

这个很容易理解，后面的取值可以是颜色的名称，也可以是颜色值，那么这些我们都讲过，所以也就不详细说明了。

#box {background-color: red;}

背景图 `background-image`

就是使用图片当做元素的背景，所以我们需要给出图片的地址，不过这里需要注意一下格式：

#box {background-image: url("miao.jpg");}

需要使用 url("") 的结构来标记一下。如果你打算清除元素已有的背景图片，也就是把元素的背景图片设置为无，那么可以这样写：

#box {background-image: none;}

因为没有图片地址，所以就不用使用上面那种结构了。

不过用到了图片以后，就要比纯色的情况复杂一些，所以我们有了如下属性：

图像重复 `background-repeat`

当图像的面积不足以覆盖整个元素的时候，默认会重复此图片，以将元素彻底覆盖。这就好像我们作图的时候用图案填充，又或者我们在铺地板上瓷砖的时候那种状态。

但有的时候，我们只需要在一个方向上进行重复，或者彻底不需要再进行重复，这时候就需要做一些设置：

#box {background-repeat: repeat; /* 两个方向上都重复，默认如此 */background-repeat: repeat repeat; /* 把两个方向分开写，第一个是横向（x 轴方向），第二个是纵向（y 轴方向） */background-repeat: no-repeat no-repeat; /* 不重复 */background-repeat: no-repeat; /* 与上面效果相同 */background-repeat: repeat-x; /* 在 x 轴方向（横向）重复 */background-repeat: repeat-y; /* 在 y 轴方向（纵向）重复 */}

图像位置 `background-position`

图像和元素如何对齐，比如放在元素中间，放在左上角……

#box {background-position: 120px 160px; /* 横向距离左侧 120px，纵向距离顶部 160px */background-position: 10% 15%; /* 用百分比也一样，第一个是横向，第二个是纵向 */background-position: top; /* top bottom left right 代表四个边，现在只写了一个边，就是值确定了横方向或者纵方向，那么另一个方向默认为 50%，就是中间 */background-position: center; /* 居中，或者写两个 center，表示两个方向都居中，不过因为像上面一样默认另一边 50%，所以一个也可以 */background-position: bottom 10px right 20px; /* 指定在某一边的偏移量，也可单独指定一边，或者和上面写法配合 */}

就那么几种取值，但是横向、纵向，一个值、两个值，一排列组合就很多了。找一个边界明显的图片设置一下看看效果，才是最快理解的方式。