background属性总结

background属性总结

1、background-color

• 背景颜色：所有合法的颜色值都可以设置。

2、background-clip

• 背景图片裁剪区域。属性值有：
  • border-box，背景被裁剪到边框盒。
  • padding-box，背景被裁剪到内边距框。
  • content-box，背景被裁剪到内容框。

3、background-image

• 背景图片：使用url来进行设置或使用渐变语法。

4、background-repeat

• 服务背景图片：设置图片是否进行平铺。属性值有：
  • repeat，xy方向都平铺；
  • no-repeat，不平铺；
  • repeat-x，x方向平铺；
  • repeat-y，y方向平铺；
  • inherit，继承父元素repeat值；

5、background-size

• 服务背景图片。指定背景图片的大小。属性值有：
  • px、percent（相对于父元素）, 接收两个值，表示背景图片的宽高。第二个值省略则为auto（图片原有大小等比例缩放）。
  • cover, 将图片等比例缩放足够大使得完全覆盖背景区域。
  • contain, 将图片等比例缩放，使得其宽度和高度完全适应内容区域。

6、background-position

• 服务背景图片。用来修改背景图片的位置。属性值有：
  • top | right | bottom | left | center, 分别表示水平和垂直方向的位置，如果第二个值不传则默认是center。
  • percent、px, 分别表示水平和垂直方向的位置，如果第二个值不传则默认是50%。正值表示图片向右/下移动。负值表示图片向左/上移动。

7、background-origin

• 服务背景图片。规定background-position属性相对于什么位置来定位。
  • padding-box,
  • border-box,
  • content-box,

  注意：
  默认值是padding-box，而background-clip的默认值是border-box，background-repeat的默认值是repeat。所以当border设置为透明边框时，会发现边框是有背景图的，但是并不是从边框的左上方开始的，而是从padding-box的左上方开始的。当我们需要设置背景图片从border-box的左上方开始，我们需要设置background-origin的值为border-box即可。

8、background-attachment

• 服务背景图片。表示盒子内容进行滚动是背景图片是否随着内容进行滚动。
  • fixed, 表示不随着内容滚动而滚动。
  • scroll, 表示随着内容滚动而滚动。
  • inheit, 表示继承父元素的background-attachment属性值。