1.CSS background属性与background-im

在书写css样式时，background属性与background-image经常用来设置背景图片，容易搞混。

background属性包含background-image属性，是在一个声明中设置所有的背景属性。

连background-image在内，background属性包含以下：

---

background-color    规定要使用的背景颜色。1

background-position    规定背景图像的位置。1

background-size    规定背景图片的尺寸。3

background-repeat    规定如何重复背景图像。1

background-origin       规定背景图片的定位区域。3

background-clip    规定背景的绘制区域。3

background-attachment    规定背景图像是否固定或者随着页面的其余部分滚动。1

background-image    规定要使用的背景图像。1

inherit    规定应该从父元素继承 background 属性的设置。1

---

通常在写css的时候，一般都直接用background做全局设置，不单独去设置。

用background做全局设置时，要将所有背景属性写在一个声明中

---

body { background: red }

p { background: url("chess.png") 40% / 10em gray  round fixed border-box; }

---

分拆写法如下

body {

    background-color: red;

    background-position: 0% 0%;

    background-size: auto;

    background-repeat: repeat;

    background-clip: border-box;

    background-origin: padding-box;

    background-attachment: scroll;

    background-image: none }

---

p {

    background-color: gray;

    background-position: 40% 50%;

    background-size: 10em 10em;

    background-repeat: round;

    background-clip: border-box;

    background-origin: border-box;

    background-attachment: fixed;

    background-image: url(chess.png) }

---

注意：将background-size与background-position同时写在background中时

  background：no-repeat scroll  0px 0px /  300px 300px   rgba(0, 0, 0, 0);

  background-position与background-size之间必须用  / 做分割 

  前面是background-position  后面是 background-size