css的背景及背景图片的属性

背景属性

---

background （缩写形式） background-color （背景颜色）

background-image （背景图片） background-repeat （背景图重复位置）

background-position （背景位置坐标，偏移量） background-clip （背景图片的裁剪位置）

background-origin （背景图片开始的显示位置） background-size （背景图片的大小）

background-attachment （图片以滚轴的形式体现） css sprite (雪碧图）

---

背景颜色 background-color

background-color: red;

---

背景图片 background-image

background-image: url("../../img/3.jpg");

---

背景图片填充 background-repeat

其属性值可以为： repeat-x （x轴方向填充）

repeat-y （y轴方向填充）

no-repeat （不填充）

background-repeat: repeat-x;

---

背景位置坐标 background-position

当指定x或y中的一个方向时，另一个方向默认是居中效果

background-poosition：left;

background-position: 20px 20px;

---

背景图片大小 background-size

其属性值可以为：1： 100% 100%是x，y轴上完全放大填充，不管图片是否失真

2： cover（覆盖）：图片等比例缩放，知道最小部分填满容器

有可能会出现图片显示不全的效果

3： contain（包含）：图片也是等比例缩放，直到最大部分填满容器

有可能出现图片覆盖不完整的效果

background-size: cover;

---

背景图片的开始显示位置 background-origin

其属性值可以为：1： border-box：从外边框开始显示

2： padding-box：从内边距开始

3： content-box：从内容处开始*/

background-origin:border-box;

---

背景图片的剪切位置 background-clip

其属性值可以为：1： border-box：从外边框出开始剪切

2： padding-box：从内边距开始剪切

3： content-box:从内容出开始剪切

background-clip: padding-box;