CSS background屬性使用指南

微信公衆號：[前端公蝦米]

關注前端公蝦米。問題或建議，請公衆號留言。

關於background的相關屬性

全部的瀏覽器都支持background屬性 拿起了我多年前用過的xmind導出了張屬性說明圖

試用模式，我太難了，公衆號回覆【background】獲取原圖

---

下面的演示案例將直接使用background這個屬性，不適用單屬性設置，由於這個屬性在瀏覽器的支持更好，更簡潔（能少一行是一行emmmm...）

經典場景

奉上原圖參照物

（圖源/網絡）

居中

不重複平鋪 順時針八個點

注：其中的`left top right bottom`爲`background-position`的屬性,能夠設置爲px 或者百分比

重複平鋪

//x軸重複平鋪
background: transparent url(./5.jpg) repeat-x
複製代碼

背景圖指定大小

在平常開發中，咱們經常須要對背景圖進行一個尺寸的縮放，上面的常規操做是沒法知足咱們的需求的。 若是是多行屬性的操做中，咱們多是這樣寫：

background: transparent url(./5.jpg) no-repeat bottom left;
background-size:150px auto;
複製代碼

而在單行屬性聲明中，咱們僅需這樣寫：

background: transparent url(./5.jpg) no-repeat bottom left/150px;
複製代碼

也能夠達到同樣的效果

注意事項:bg-size必須跟在bg-position後並以'/'分隔，如'center/100px'

關於bg-clip與bg-origin的屬性說明

background-origin:背景圖的原點位置的背景相對區域 background-clip:背景圖是否延伸到邊框下面

在單行background屬性聲明中，因爲二者屬性值相同，在僅出現了一個屬性值的時候，他同時爲 background-origin和background-clip設定屬性，若是出現了兩次，則分別給background-origin、background-clip設定.

小結：

• background-origin決定了背景圖原點從哪開始(起始點)
• background-clip決定了背景圖的繪製到邊框外沿、padding外延或者是content外延終止(終止點)
• 從我我的的理解上，起始點和終止點的對角線連線即爲背景圖可繪製的最大區域
• 當使用 background-attachment 爲fixed時，background-origin屬性將被忽略不起做用。
• background-clip能夠將背景圖設置爲文字的前景色

background 多背景圖片使用

CSS以下：

background: url('./9.jpg') left center/100px no-repeat,
                url('./7.jpg') top center/100px no-repeat,
                url('./7.jpg') bottom center/100px no-repeat,
                url('./9.jpg') right center/100px no-repeat red;
複製代碼

效果圖以下：

注：由於整個元素只能有一個背景色，因此在定義多背景圖片的時候bg-color只能在最後一個屬性上聲明，不然會致使整個background屬性聲明失效；

在多張背景圖存在重疊的狀況下，先聲明的背景圖優先級高 CSS以下：

background: url('./5.jpg') center/100px no-repeat,
                url('./7.jpg') top center/100px no-repeat,
                url('./4.jpg') bottom center/150px no-repeat,
                url('./7.jpg') bottom center no-repeat,
                url('./9.jpg') right center/100px no-repeat red;
複製代碼

效果圖以下：

有關background的單行屬性聲明使用就講到這裏，後續會繼續補充，寫的很差的麻煩見諒...新手做者

Object-fit實現img圖片尺寸設置

本文主要針對的是background屬性中的圖片常規操做，講到圖片，這邊也淺談一下img的一個圖片尺寸設定的小技巧，讓咱們的小夥伴們從

display: inline-block;
    width: 100%;
    height: auto;
複製代碼

解脫出來

CSS部分

HTML部分

效果圖

該屬性分別有fill、contain、cover、none、scale-down五個，從效果圖上來看，應該很好理解，這邊只對scale-down作一下說明。

scale-down屬性值的內容尺寸會與none或者contain其中一個同樣，至於取決於哪一個值，取決於none和contain哪一個獲得的內容尺寸更小一些。當前的none屬性黑眼圈較大影響工做，因此選擇了contain黑眼圈較小的來安慰本身

小結

本文僅僅是總結了下background在實際開發中使用背景圖片的相關單行屬性聲明的使用技巧 但願個人內容能被你們喜歡，不足之處還望理解和但願大佬指出賜教。 謝謝你們！

若是你以爲這篇文章不錯，請別忘記點個贊跟關注哦~😊

交流

微信公衆號「前端公蝦米」，將不定時更新最新、實用的開發小技巧和相關前端乾貨 關注公衆號，回覆"資料"獲取全套前端視頻教程