css中，background怎樣在保證容器沒有空余的情況下，占滿容器？

CSS 中，要讓背景圖片在不拉伸變形的前提下盡可能占滿容器，同時不留空余部分（即保持圖片的縱橫比并且填充整個容器），可以使用 background-size 屬性，并設置為 cover。

頁美工培訓機構教你用讓背景圖片拉伸填充的css屬性，比如一個容器(body,div,span)中設定一個背景。這個背景的長寬值在css2.1之前是不能被修改的。

所以實際的結果是只能重復顯示，所以出現了repeat,repeat-x,repeat-y,no-repeat這些屬性。就是用來

控制背景圖片的顯示的。所以一般用作背景圖片的有2類：

1.是一整張大圖，尺寸和區域大小剛好吻合

2.一個很小的條狀圖，通過repeat后，形成一個很規則的大圖背景。

但是css3出現以后，這個情況被改善了。background-size 屬性可以讓我們之前的希望成真。

而且這個屬性在firefox，chrome，以及ie9上都可以使用。

具體使用方法如下：（上海網頁美工設計培訓）

背景圖尺寸(數值表示方式)：

#background-size{

background-size:200px 100px;

}

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

一、瀏覽器支持

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

數字后面的 -webkit- 或者 -moz- 使用時需要指定前綴。

屬性ChromeFirefoxSafariOperaIEbackground-image (多背景)4.09.03.63.111.5background-size4.0 1.0 -webkit-9.04.0 3.6 -moz-4.1 3.0 -webkit-10.5 10.0background-origin1.09.04.03.010.5background-clip4.09.04.03.010.5

二、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 屬性

CSS3 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 屬性

CSS3 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等多個屬性的應用，豐富的案例幫助大家更好的理解。

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

想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/

在線咨詢

上一篇：小白如何快速入門JavaScript？6分鐘帶你看懂快速學習的六大步驟
下一篇：HTML的一些常用的語法寫法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商