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