你可能不是那麼瞭解的 CSS Background

時間 2020-01-14

標籤可能不是那麼瞭解 css background 欄目 CSS 简体版

原文原文鏈接

本文首發於政採雲前端團隊博客：你可能不是那麼瞭解的 CSS Background

前言

Background，寫過 CSS 的朋友們確定都知道這個屬性的做用，顧名思義，背景嘛。MDN 中對其的定義以下：css

Background 是一種 CSS 簡寫屬性，一次性定義了全部的背景屬性，包括 color, image, origin 還有 size, repeat 方式等等。html

咱們首先講一下 Background 的平常語法：前端

Background 可使用簡寫或者單獨設置其中一項：css3
- 簡寫語法json
  - 官方推薦順序爲： background: background-color，background-image，background-repeat，background-attachment，background-position;
  - 不強制要求書寫順序
- 單獨設置樣式

值	說明	默認值	版本
background-color	指定要使用的背景顏色	transparent	CSS2.1
background-position	指定背景圖像的位置	0%, 0%	CSS2.1
background-image	指定要使用的一個或多個背景圖像	none	CSS2.1
background-repeat	指定如何重複背景圖像	repeat	CSS2.1
background-attachment	設置背景圖像是否固定或者隨着頁面的其他部分滾動。	scroll	CSS2.1
background-size	指定背景圖片的大小	auto	CSS3
background-origin	指定背景圖像的定位區域	padding-box	CSS3
background-clip	指定背景圖像的繪畫區域	border-box	CSS3

Background 基礎篇

這裏給你們展現一下幾個常見的 background 的屬性的用法：瀏覽器

<style>
    .div1 {
        width: 100px;
        height: 100px;
        background-color: black;
        background-image: url('img1');
        background-size: 50%;
        background-repeat: no-repeat;
    }
</style>
<body>
    <div class="div1"></div>
</body>

background-color 背景顏色ide
- 屬性值可設置爲：

（1）單詞：background-color: black;wordpress

（2）十六進制：background-color: #000;函數

（3）RGB 色彩模式：background-color: rgb(0, 0, 0);性能

background-image 背景圖片
- background-image: url('')
- 也可同時設置多張圖片，詳見進階篇 - 多背景圖片
background-size 背景圖片尺寸
- 經常使用屬性值有：

（1）百分比：background-size: 100%;

（2）像素值：background-size: 100px;

當只設置一個值時，默認爲寬度，而高度按比例自適應。

background-repeat 背景圖片重複
- 經常使用屬性值有：

（1）repeat (重複)：background-repeat: repeat;

（2）repeat-x (橫向重複)：background-repeat: repeat-x;

（3）repeat-y (縱向重複)：background-repeat: repeat-y;

（4）no-repeat (不重複)：background-repeat: no-repeat;

Background 進階篇

多背景圖片 background-image

在 CSS2.1 中，元素只能添加一張背景圖片。然而在 CSS3 中，咱們能夠給元素添加多張背景圖片。其兼容性以下圖所示：

多張背景圖片可針對每一張設置單獨的樣式，對應樣式用逗號分隔

<style>
  .div1 {
    width: 100px;
    height: 100px;
  
    background-color: black;
    background-image: url('img1'), url('img2');
    background-size: 50%, 100%;
    background-repeat: repeat-x, no-repeat;
  }
</style>
<body>
  <div class="div1"></div>
</body>

若是屬性值的個數與圖片個數不相等呢？

<style>
  .div1 {
    width: 100px;
    height: 100px;

    background-color: black;
    background-image: url('img1'), url('img2'), url('img3');
    background-size: 50%, 30%;
    background-repeat: repeat-y, no-repeat;
  }
</style>
<body>
  <div class="div1"></div>
</body>

多背景圖片總結：

背景圖片所生效的樣式，是屬性值中與圖片位置對應的值；
若是屬性值比背景圖片的個數要少，那麼沒有對應的值的圖片樣式以第一個值爲準；
背景圖片的層級按着從左往右，依次減少。固然，層級最低的仍是 background-color；

背景漸變 background-image: linear-gradient

背景漸變是基於 background-image 來設置的。具體語法詳見 MDN。其兼容性以下圖所示：

background-image: linear-gradient 路徑漸變（可手動設置方向，默認自下向上）
linear-gradient() 的用法以下用法: ( 詳見 MDN )

linear-gradient( [<angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

<angle>：用角度值指定漸變的方向

<side-or-corner>： [left | right] || [top | bottom]

<color-stop>：<color> [ <percentage> | <length> ]?

例: background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);

<style>
  .div1 {
    background - image: linear-gradient(#71c9ce, #e3fdfd);;
  }
</style>
<body>
  <div class="div1"></div>
</body>

background-image: radial-gradient 徑向漸變
radial-gradient 用法以下：(詳見 MDN )

radial-gradient( [ [ellipse | circle] || [ <extent-keyword> | <precentage> ] [ at <position> ]? ] ? <color-stop> [ , <color-stop> ]+ )

<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

<color-stop>：<color> [ <percentage> | <length> ]?

例: background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);

<style>
  .div1 {
    background - image: radial-gradient( #71c9ce, #e3fdfd);;
  }
</style>
<body>
  <div class="div1"></div>
</body>

background-image: repeating-linear-gradient 重複路徑漸變

<style>
  .div1 {
    background - image: repeating-linear-gradient(45deg, #71c9ce 20px, #a6e3e9 30px, #e3fdfd 40px);
  }
</style>
<body>
  <div class="div1"></div>
</body>

background-image: repeating-radial-gradient 重複徑向漸變

<style>
  .div1 {
    width: 100px;
    height: 100px;

    background-color: black;
    background-image: repeating-radial-gradient(circle, #90ade4 ,#3350ba 20%);
  }
</style>
<body>
  <div class="div1"></div>
</body>

背景定位 background-position

在講如下內容以前，咱們先科普一下一個元素所涉及的三個盒子，請看圖↓

上圖三個盒子分別爲 content-box（內容盒子）、padding-box（內邊距盒子）和 border-box（邊框盒子）。

border-box 即所設置元素的 border 所佔的區域，位於 padding 和 content 的外層
padding-box 即所設置元素的 padding 所佔的區域，位於 border的內層、content 的外層
content-box 元素的 padding 所佔區域包圍着的即爲 content

background-position 默認的定位爲 padding-box 盒子的左上角。

其屬性值可設置爲

（1）百分比（%)

（2）像素（px）

（3）位置（top | right | bottom | left | center）

在只設置一個值的時候，另一個值默認爲 center 或 50% 。
padding-box 盒子的左上角座標爲 (0, 0) / (left, top)，右下角爲 (100, 100) / (right, bottom)。
demo

<style>
  .div1 {
    width: 100px;
    height: 100px;

    background-image: url('img1');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: right;
  }
</style>
<body>
  <div class="div1"></div>
</body>

背景重複 background-repeat

background-repeat 除了常見的幾個 repeat、repeat-x，repeat-y 以及 no-repeat 之外，還在CSS3 中新加了兩個值： space 和 round。其兼容性以下圖所示：

背景圖片小於容器時
- background-repeat:space 在保證不縮放的前提下儘量多的重複圖片，並等分圖片中間的空隙
- background-repeat:round 在儘量多的重複圖片的前提下，拉伸圖片以鋪滿容器
背景圖片大於容器時
- background-repeat:space 在不縮放的前提下裁剪圖片，只保留在容器內的部分

background-repeat:round 縮小圖片以鋪滿容器，長寬與容器尺寸一致（未按比例縮放，圖片極有可能變形）

背景相對位置 background-origin

background-origin 屬性規定 background-position 屬性相對於什麼位置來定位。屬性值有 content-box 、padding-box 、border-box 三個，默認爲 padding-box。其兼容性以下：

background-origin: content-box (下圖爲設置 padding: 20px )

background-origin: padding-box

![圖片](https://zcy-cdn.oss-cn-shanghai.aliyuncs.com/f2e-assets/ec1869f2-c936-4190-9afb-1489eecc1b00.jpg)

background-origin: border-box

背景繪製區域 background-clip

background-clip 屬性規定背景的繪製區域。默認值爲 border-box，其屬性值同 background-origin 同樣，不過表現大不相同。其兼容性以下：

background-clip: content-box

background-clip: padding-box

![圖片](https://zcy-cdn.oss-cn-shanghai.aliyuncs.com/f2e-assets/a66348a8-6a3b-41cf-95ca-ebb7d6794732.jpg)

background-clip: border-box`

背景大小 background-size

感受這個屬性很常見吧，其實它也是 CSS3 中新加的屬性。 CSS2.1 中，背景圖片大小是沒法設置的。background-size 除了常見的設置大小和百分比以外，還有兩個特殊的屬性：contain 和 cover

background-size: contain 圖片長寬不相同時，把圖片按比例縮小至較長的一方徹底適應內容區域爲止，多用於背景圖片比元素大的狀況。
background-size: cover 圖片長寬不相同時，把圖片按比例放大至較短的一方徹底適應內容區域爲止，以使背景圖像徹底覆蓋背景區域，多用於背景圖片比元素小的狀況。

背景固定 background-attachment

有時候在一些網站上會看到，滾動頁面的時候，背景圖片是固定的。那就是使用 background-attachment: fixed 作到的。

background-attachment: fixed 背景固定

background-attachment: scroll 背景隨頁面滾動而滾動（默認）

擴展屬性 background: element

一個特殊的擴展屬性，能夠將某個元素設置爲另外一元素的背景。驚不驚喜，意不意外！不過這個屬性只有 FireFox 4+ 的瀏覽器可使用，而且須要加上瀏覽器前綴。

background: element(#id)
- demo1 做爲背景的是非圖片元素時，背景樣式與原元素相同

<style>
  .div {
    width: 200px;
    height: 200px;
    background: element(#button)  no-repeat;
    background: -moz-element(#button)  no-repeat;
  }
  #button {
    width: 150px;
    height: 20px;
    margin: 50px;
    color: #0470f4;
  }
</style>
<body>
  <div class="div1">
    <button id='button'>這是按鈕</button>
  </div>
</body>

demo2 當設置爲背景的元素是圖片時，背景圖不會隨原圖的大小樣式改變而改變，不過平鋪等背景樣式依然是支持的

<style>
  .div {
    width: 200px;
    height: 200px;
    border: 10px dashed #0ff;
    background: element(#img1);
    background: -moz-element(#img1);
  }
  #img1 {
    width: 50px;
  }
</style>
<body>
  <div class="div1">
    <img id='img1' src='img1' />
  </div>
</body>

結語

CSS 中還有許許多多的咱們未知的東西，咱們正在一點點探索，期待與你同行。若是你也有什麼新發現，歡迎與咱們一塊兒討論~

參考文章

招賢納士

政採雲前端團隊（ZooTeam），一個年輕富有激情和創造力的前端團隊，隸屬於政採雲產品研發部，Base 在風景如畫的杭州。團隊現有 50 餘個前端小夥伴，平均年齡 27 歲，近 3 成是全棧工程師，妥妥的青年風暴團。成員構成既有來自於阿里、網易的「老」兵，也有浙大、中科大、杭電等校的應屆新人。團隊在平常的業務對接以外，還在物料體系、工程平臺、搭建平臺、性能體驗、雲端應用、數據分析及可視化等方向進行技術探索和實戰，推進並落地了一系列的內部技術產品，持續探索前端技術體系的新邊界。

若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「5 年工做時間 3 年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手推進一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。