一篇文章帶你了解CSS3 背景知識

CSS3中包含幾個新的背景屬性，提供更大背景元素控制。

一、浏覽器支援

表中的數字指定完全支援該屬性的第一個浏覽器版本。

數字後面的 -webkit- 或者 -moz- 使用時需要指定字首。

屬性	Chrome	Firefox	Safari	Opera	IE
background-image (多背景)	4.0	9.0	3.6	3.1	11.5
background-size	4.0 1.0 -webkit-		4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0
background-origin	1.0			3.0	10.5
background-clip

二、CSS3 多背景

CSS3允許你為一個元素添加多個背景圖像, 通過使用

background-image

屬性.不同的背景圖像用逗号隔開，圖像疊加在一起，

例：有兩個背景圖像，第一圖像是背景圖（在右下角）和第二圖像是一個GIF動圖（在左上角）。

代碼如下：

<!DOCTYPE HTML>
<meta charset="utf-8">
<title>項目</title>
<head>
<style>
    #example1 {

    background-image: url(img/fy_indexBg.jpg), url(img/17I_hd.mp4.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}
</style>
</head>
<html>

<body>
 <div id="example1">
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
</body>

</html>

可以使用單獨的背景屬性（如上所示）或背景簡寫屬性指定多個背景圖像。

下面的例子使用了背景速記

（上面的例子，有相同的結果）

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

1. CSS3 背景尺寸

CSS3

background-size

屬性允許你指定背景圖像的尺寸.

在CSS3之前的背景圖像大小是圖像的實際大小。CSS3允許我們使用背景圖像在不同的上下文中。

size可以指定長度、百分比，或通過使用一個關鍵詞:

contain

或者

cover

示例：圖檔背景圖像比原圖像小得多（以像素為機關）:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>項目</title>
  <style>
    #example1 {
        border: 1px solid black;
        background:url(img_flwr.gif);
        background-repeat: no-repeat;
        padding:15px;
    }

    #example2 {
        border: 1px solid black;
        background:url(img_flwr.gif);
        background-size: 100px 80px;
        background-repeat: no-repeat;
        padding:15px;
    }
</style>
</head>
<body>

  <p>原背景:</p>
  <div id="example1">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

  <p>縮放背景圖:</p>
  <div id="example2">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

</body>
</html>

background-size

屬性兩個可能值是：

contain

和

cover

含有關鍵詞尺度的背景圖像盡可能大的（但它的寬度和高度必須在内容區域）。是以，根據背景圖像的比例和背景區的定位，有可能不被背景圖像覆寫。

cover 關鍵詞縮放背景圖像，内容區域完全覆寫了背景圖像（它的寬度和高度等于或超過該範圍的内容）。是以，背景圖像的某些部分可能不在背景區的定位是可見的。

下面的示例示範了使用

contain

cover

：

#div1 {
    background: url(img_flower.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
#div2 {
    background: url(img_flower.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

2. 定義多個尺寸的背景圖像

background-size

屬性也接受多個背景值（使用逗号分隔清單），當處理多個背景時。

下面的示例指定三個背景圖像，每個圖像具有不同的

background-size

值：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>項目</title>
        <style>
            #example1 {
                background: url(img/fy_indexBg.jpg) left top no-repeat, url(img/fy_indexBg.jpg) right bottom no-repeat, url(img/17I_hd.mp4.gif) left top repeat;
                padding: 15px;
                background-size: 50px, 130px, auto;
                color: white;
            }
</style>
    </head>

    <body>

        <div id="example1">
            <h1>Lorem Ipsum Dolor</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>

    </body>

</html>

3. 全尺寸的背景圖檔

如果希望在一個覆寫整個浏覽器視窗的網站上有一個背景圖像。.

要求如下:

填滿整個頁面的圖像（沒有空白）

縮放圖像
圖像居中頁面
沒有滾動條

下面的示例示範如何使用HTML元素（HTML元素始終是浏覽器視窗的高度）。然後設定一個固定中心的背景上。然後用

background-size

屬性調整它的大小：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>項目</title>
  <style>
    html {
      background: url(img/fy_indexBg.jpg) no-repeat center fixed;
      background-size: cover;
    }
</style>
</head>
<body>

  <h1>整個頁面背景圖</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

三、屬性

1. background-origin 屬性

background-origin

屬性指定在背景圖像定位在哪裡.

這個屬性有三個不同的值：

border-box ：背景圖像從邊框的左上角開始。

padding-box ：（預設）背景圖像從左上角的填充邊緣。

content-box ：背景圖像從左上角的内容

下面的例子說明了

background-origin

屬性：

#example1 {
        border: 10px solid black;
        padding: 35px;
        background: url(img/fy_indexBg.jpg);
        background-repeat: no-repeat;
    }

    #example2 {
        border: 10px solid black;
        padding: 35px;
        background: url(img/fy_indexBg.jpg);
        background-repeat: no-repeat;
        background-origin: border-box;
    }

    #example3 {
        border: 10px solid black;
        padding: 35px;
        background: url(img/fy_indexBg.jpg);
        background-repeat: no-repeat;
        background-origin: content-box;
    }

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>程式設計字典</title>
  <style>
    #example1 {
        border: 10px solid black;
        padding: 35px;
        background: url(img/fy_indexBg.jpg);
        background-repeat: no-repeat;
    }

    #example2 {
        border: 10px solid black;
        padding: 35px;
        background: url(img/fy_indexBg.jpg);
        background-repeat: no-repeat;
        background-origin: border-box;
    }

    #example3 {
        border: 10px solid black;
        padding: 35px;
        background: url(img/fy_indexBg.jpg);
        background-repeat: no-repeat;
        background-origin: content-box;
    }                
</style>
</head>
<body>

  <p>沒有 background-origin (padding-box 預設):</p>
  <div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

  <p>background-origin: border-box:</p>
  <div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

  <p>background-origin: content-box:</p>
  <div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

</body>
</html>

2. background-clip 屬性

background-clip

屬性指定背景的繪制面積.

該屬性有三個不同的值:

border-box

- (預設) 背景是畫的邊框外邊緣

padding-box

-背景被顯示到填充物的外緣。

content-box

- 背景是畫在内容框内

下面舉例示範了

background-clip

屬性:

#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}

四、總結

本文主要介紹了CSS背景，通過CSS實作多背景顯示，自定義某一些尺寸顯示格式，background-origin等多個屬性的應用，豐富的案例幫助大家更好的了解。

希望大家自己去嘗試一下，實作的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以了解的更加深刻。

一篇文章帶你了解CSS3 背景知識

一、浏覽器支援

二、CSS3 多背景

1. CSS3 背景尺寸

2. 定義多個尺寸的背景圖像

3. 全尺寸的背景圖檔

三、屬性

1. background-origin 屬性

2. background-clip 屬性

四、總結

繼續閱讀

iOS開發之送出App前需要準備的材料

iOS APP送出上架最新流程

在Windows上編譯Wireshark源代碼 .

Learning Perl: 1.3. How Can I Get Perl?

2018年不想被web前端開發淘汰，你需要掌握哪些技術？

怎麼能學好Web前端開發該如何規劃學習路線

如何學好Web前端開發企業對前端人員什麼要求

怎麼學好Web前端開發技術需要注意哪些因素

小白怎麼學好Web前端 Vue動畫效果如何實作

Web前端人員如何提升能力提高效率有哪些方法

小白該如何入門Web前端怎麼學好JS子產品化程式設計

Web前端要掌握哪些知識點怎麼學好前端元件化

Perl與網絡監控

WEB前端開發規範文檔（範文）

EGORefreshTableHeaderView 解讀代碼解讀 ELTableViewController 的使用寫在最後

今日頭條iOS用戶端啟動速度優化技術調研實測資料