background

小编从今天开始就转战掘金了之前在CS**体验太难受了，正好也去除掉以前一些比较辣眼睛的文章，搬家开始！！！

background属性

• -clip：设置背景(背景颜色和背景图片)所占位置，该属性有四个值。

  • border-box
  • padding-box
  • content-box
  • text-box

  那么显然根据我们平常所看到的该属性默认值为padding-box，以此类推背景作用区域。
  看个小demo(图片做字的背景)

  <style>
      .content {
          width:300px;
          line-height: 200px;
          text-align: center;
          font-size: 3em;
          font-weight: 700;
          border: 5px dashed black;
          background-image: url("图片地址");
          background-clip: text;
          color: transparent;
      }
  </style>
  <div class="content">This is the content of the element.</div>
  

• -color
• -image
  这边主要是谈及一下他与直接在background上设置图片的区别

  css中background是背景设置的集合,而background-image只是设置背景的图片样式. background后可加背景颜色,背景图片及图片排列样式,和结构对齐样式,可以说控制了整个背景的属性。

• -orgin：规定了指定背景图片background-image 属性的原点位置的背景相对区域。
  通俗理解来说就是定义了图片对相对位置。
  定义为content-box

  

• -position:为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin 定义的位置图层的。
• -size
  • auto：以背景图片比例缩放背景图(默认值)
  • cover：缩放背景图片到完全覆盖背景区域，可能背景图片部分看不见。
  • contain：按照图片比例去缩放背景图片“完全适应背景区”，可能出现重复。

    小编认为二者区别在于前一个是按比例缩放到盒子可以撑满它认为最好的比例，而后者则是依据盒子宽高去对他进行缩放。具体小编认为可以自行小demo感受一下两者区别。

• -attachment 这个属性就比较好玩了大家可以参考一下小编给的官方解释去理解一下案例也写得很好这个上面 MDN about background-attachment