CSS3 背景设置

背景图原点

• background-origin ：padding-box; (默认)

  border-box | padding-box | content-box

• background-origin是用来决定图片的原始起始位置。

• 它有三个可选值content-box,padding- box,border-box，即可以选择背景图片是从内容区域或者内边距或者边框开始显示。

背景图裁剪

• background-clip

  border-box | padding-box | content-box

• background-clip的作用为将背景图片做适当的裁剪，以适应需要。

• background-clip有content- box,padding-box,border-box，text几个值剪裁方法：根据设置的盒子部位，那么图片在这个部位的外边缘以外的部分都会不可见。

背景图大小

• background-size

  length： 长度值---第一个值设置宽度，第二个值设置高度

  percentage： 百分比---第一个值设置宽度，第二个值设置高度

  cover：等比缩放到完全覆盖容器，背景图像有可能超出容器

  contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

多重背景

• background-image：CSS3允许您为元素使用多个背景图片

• background-image: url('1.jpg),url('2.jpg') ... 使用逗号把图片分开

• 元素引入多个背景图片，前面图片会覆盖后面的图片