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