本文主要介绍如何在网页布局中使用背景图片。先逐个介绍基本的样式，最后介绍样式该如何简写。

1.background-color

设置背景颜色

2.background-image

设置背景图片

3.background-repeat

设置背景图片是否重复

4.background-position

设置背景图片位置，可以设置具体偏移量，也可设置center/left/right/top/bottom,不设默认为center

5.background-size

设置图片大小，第一个为宽，第二个为高，可设置具体值，设置宽度后高度等比例缩放。

可设置cover,图片覆盖整个区域

可设置contain，区域内会完整显示图片

6.background-clip

设置背景的范围。有三个值，border-box,padding-box,content-box.背景颜色会延伸到设置的范围内

7.background-origin

设置背景图片偏移的位置，有三个值，border-box,padding-box,content-box.

Document

 8.简写形式

语法：

background: #f19d9d url(./img1.jpeg) no-repeat 200px 50px/200px;

注意：大小要写在位置后

Document

 效果如图：

 

查看原文