background-clip,background-origin和background-position

background-postion

规定背景图片的位置

1. px 第一值是x轴，第二个是y轴，默认是从左上角开始的，如果只设置第一个，第二个默认是auto

2. 百分比，根据相对于父元素

3. top | center | bottom | left | center | right

4. cover 把图像扩展至足够大，以使背景完全覆盖背景区域。背景图像的某些部分会无法显示(保持等比比例)

5. contain 吧图片扩展到最大尺寸，使宽度和高度完全适应区域(保持等比比例)会使背景区域一部分为空白

background-origin

origin 有起源的意思，background-origin是背景起点的位置(从哪定位)，告诉浏览器background-position根据哪里定位的。也就是说background-postition根据background-origin的位置变化的。默认是从内边距的位置开始展示背景图片。

有三个参数分别为content-box, padding-box和border-box

content-box 是指从内容的位置开始定位展示背景图片

padding-box 是指从内边距的位置开始定位展示背景图片

border-box 是指从外边框的位置开始定位展示背景图片

如果当内边距为0的话，content-box跟padding-box是一样的效果

如果当外边框为0的话，border-box跟padding-box是一样的效果

style

 div {
  background: url('../a.png') no-repeat;
  width: 100px;
  height: 100px;
  padding: 40px;
  border: 50px dashed #ccc;
  display: inline-block;
  margin-right: 20px;
 }
 .bgImg1 {
      background-origin: content-box;
 }
 .bgImg2 {
      background-origin: padding-box;
 }
 .bgImg3 {
      background-origin: border-box;
 }

html

  <div></div>
  <div class="bgImg1"></div>
  <div class="bgImg2"></div>
  <div class="bgImg3"></div>

background-clip

background-clip规定背景图片如何去截取展示，多余的部分会被截取掉

有三个参数: content-box, padding-box和border-box

content-box 是指在内容的位置展示，多余的部位会被截取掉

padding-box 是指在内边距的位置展示，多余的部位会被截取掉

border-box 是指在外边框的位置展示，多余的部位会被截取掉

style

  div{
    background: url('../../img/a.png') no-repeat;
    width: 100px;
    height: 100px;
    padding: 40px;
    border: 50px dashed #ccc;
    display: inline-block;
    margin-right: 20px;
  }
  .bgImg1 {
    background-origin: border-box;
  }
  .bgImg2 {
    background-clip: padding-box;
  }
  .bgImg3 {
    background-clip: content-box;
  }

html

  <div class="bgImg1"></div>
  <div class="bgImg2"></div>
  <div class="bgImg3"></div>