學透CSS-萬字長文助學圖片屬性（中）-attachment、clip、repeat、size等 連載中

這是我參與8月更文挑戰的第11天，活動詳情查看：8月更文挑戰

讀不在三更五鼓，功只怕一曝十寒。看完以爲有收穫的，點個讚唄！！！

前言

上文咱們介紹了，背景圖片以及漸變，可是僅僅學會那點，只是背景圖片的九牛一毛，本文要介紹的backdround-* 你們族，也是背景圖片變幻無窮的基石。

background-repeat ：如何平鋪背景圖片。

語法

單值語法

background-repeat：屬性值；

repeat：在兩個方向上平鋪圖像。這是默認值。

background-image: url('./juejin.png');
background-repeat: repeat;
複製代碼

repeat-x: 水平平鋪圖像

background-image: url('./juejin.png');
background-repeat: repeat-x;
複製代碼

repeat-y: 垂直平鋪圖像

background-image: url('./juejin.png');
background-repeat: repeat-y;
複製代碼

no-repeat: 不要平鋪，只顯示一次圖像

background-image: url('./juejin.png');
background-repeat: no-repeat;
複製代碼

space：在兩個方向上平鋪圖像。除非單個圖像太大而沒法容納，不然不裁剪圖像。若是能夠容納多個圖像，請將它們隔開，使圖像始終接觸邊緣。

仔細看，repeat的時候，最後一個圖像是沒有顯示全的，使用space會自動增長圖像的間距，以前的最後一圖像顯示全了。

round：在兩個方向上平鋪圖像。除非單個圖像太大而沒法容納，不然切勿裁剪圖像。若是多個圖像能夠容納剩餘空間，請將它們壓扁或拉伸以填充空間。若是剩下的圖像寬度小於一半，則拉伸，若是大於，則拉伸。

先看下正常的狀況，右邊和下邊都顯示不全，右邊的明顯小於圖片的通常，下邊明顯大於圖片一半

width: 190px;
 height: 110px;
background-image: url('./juejin.png');
background-repeat: repeat;
複製代碼

下面再來看一下使用round的效果 明顯能夠看見最右側的一列沒有了，下邊的一行顯示的全。

兩值語法

兩個值的語法：

/* background-repeat: horizontal vertical */
   background-repeat: repeat space;
   background-repeat: repeat repeat;
   background-repeat: round space;
}
複製代碼

background-attachment ：背景圖片是否固定或隨着滾動移動。

屬性值

scroll

背景圖像相對於元素固定，也就是說當元素內容滾動時背景圖像不會跟着滾動，由於背景圖像老是要跟着元素自己。但會隨元素的祖先元素或窗體一塊兒滾動。

fixed

背景圖像相對於窗體固定

local

背景圖像相對於元素內容固定，也就是說當元素隨元素滾動時背景圖像也會跟着滾動

background-position ：背景圖片的位置。

定義

在其容器內移動背景圖像（或漸變）。

語法

兩個值

兩個值時，第一個值是水平偏移量，第二個值是垂直偏移量。

長度值（例如100px 5px）

百分比（例如50% 5%）

關鍵字（例如top right）

單值

該值是水平偏移量。瀏覽器將垂直偏移設置爲center

三/四個值

語法以下：

background-position: top/bottom/right/bottom 100px top/bottom/right/bottom;// 第四個默認爲0；
background-position: top/bottom/right/bottom 100px top/bottom/right/bottom 20px;

複製代碼

注意不能同時出現 bottom和top,或者 right/bottom,由於這是不符合常理的。

background-size ：設置背景圖片的大小。

前言

我的認爲，這是CSS屬性中最複雜屬性之一，由於他支持的語法特別多，可是這個語法也是特別簡單的，比較容易記的。

語法

特定值

auto

默認值，瀏覽器根據圖片的實際大小和縱橫比自動計算大小

// 背景圖片的大小是100*123
  width: 200px;
  height: 200px;
  background-image: url("./bk.jpg");
  background-repeat: no-repeat;
  background-size: auto;
複製代碼

cover

確保圖像始終覆蓋整個容器，即便它必須拉伸圖像或切掉一個邊緣。

// 背景圖片的大小是100*123
  width: 200px;
  height: 200px;
  background-image: url("./bk.jpg");
  background-repeat: no-repeat;
  background-size: cover;
複製代碼

contain

瀏覽器會保持圖片的寬高比，而後拉伸到合適的大小，最終保證寬或者高等於容器，而且是始終顯示整個圖像，

// 背景圖片的大小是100*123
  width: 200px;
  height: 200px;
  background-image: url("./bk.jpg");
  background-repeat: no-repeat;
  background-size: contain;
複製代碼

這裏由於容器的寬高一致，圖片的高度是大於寬度的，因此瀏覽器優先拉伸高度，致使寬度有空白

單值

只提供一個值（例如background-size: 400px），它會計算寬度，而高度設置爲auto。你能夠使用任何你喜歡的CSS大小單位，包括像素、百分比、em、視口單位等。

雙值

若是提供兩個值，第一個設置背景圖像的寬度，第二個設置高度。與單值語法同樣，能夠使用任何您喜歡的度量單位。

多張圖片尺寸

語法

background-image: 圖片1,圖片2，......;
background-size: 圖片1尺寸, 圖片2尺寸.....;
複製代碼

width: 200px;
      height: 200px;

      background-image: url("./bk.jpg"),url('./juejin.png');
      background-repeat: no-repeat;
      background-size: 30px 30px, 60px 60px;
複製代碼

background-orgin： 背景圖片的起點位置

前言

這裏標題中寫了背景圖片的起點位置，是有特殊意義的，由於這個屬性對背景顏色沒有效果

border: dashed 5px rgba(20,81,154,0.5);
  width: 200px;
  height: 200px;
  background-origin: content-box;
  background-color: aqua;
  background-size: 250px 250px; */
  padding: 20px;
複製代碼

這裏設置起點位置是content-box,可是並無生效

屬性值

border-box

從border做爲起點 仔細看圖，你會發現，圖片是從左上角內容開始的，整個圖片都在border-box下。

padding-box

從邊框做爲起點 仔細看圖，你會發現，圖片是從左上角padding開始的，而且右邊和下邊仍是在border區域的。

content-box

從content做爲起點 仔細看圖，你會發現，圖片是從左上角內容開始的，而且右邊和下邊仍是在border區域的。

background-clip 對圖片和背景色的裁剪

前言

這個屬性和上面的background-origin 乍一看特別像，屬性值都如出一轍， 不過從標題中咱們最早肯定的是clip會對背景顏色生效。

屬性值

border-box

整個元素

padding-box

content-box

從內容區域開始裁剪

background-clip: content-box;
 background-color: aqua;
 background-image: url();
複製代碼