背景圖像大小的完整控制——background-size

一、初探background-size

在CSS中，我們常常需要用到背景圖像。但是有時候我們想要圖片大小不只是填充整個背景，而是按照一定比例或大小放置，怎麼辦呢？這時候，我們就需要用到background-size屬性。

background-size屬性用來控制背景圖像的大小。默認值為auto，即將背景圖片按照其原有大小展示。我們可以利用background-size實現許多有意思的效果。具體如下：

二、絕對大小控制

如果我們希望背景圖片的大小精確到指定的尺寸，可以使用固定的像素或長度單位。

    background-size: 200px 300px;  /*將寬度設置為200px，高度設置為300px*/
    background-size: 50% 80%;      /*將寬度設置為父元素寬度的50%，高度設置為父元素高度的80%*/

注意，如果我們的背景圖片比指定的大小小，則會在其周圍填充透明區域以達到指定的大小。另外，如果我們只設置了一個值，則該值將被視為寬度，而高度會按比例自動調整。

三、相對大小控制

如果我們希望背景圖片相對於其自身大小進行縮放，可以使用百分比。

    background-size: contain;      /*將背景圖片縮放至剛好完全展示出（寬度或高度都可能會留有空白區域）*/
    background-size: cover;        /*將背景圖片縮放至剛好鋪滿（寬度或高度可能會超出）*/

contain和cover值在縮放背景圖片時非常有用，但有時也可能會因為圖片太小或太大而無法滿足需求。因此，我們可以結合其他的百分比指定background-size：

    background-size: 50% auto;     /*將背景圖片的寬度縮放至父元素的一半，高度自適應*/
    background-size: auto 80%;     /*將背景圖片的高度縮放至父元素的80%，寬度自適應*/

四、多重背景及懸浮

在CSS3中，background-size還支持多重背景。這意味着我們可以在同一元素上應用多個背景圖片，每個背景圖片都有自己的background-size控制。

    background-image: url("bg.png"), url("bg2.png");      /*同時設置兩張背景圖像*/
    background-size: 50% auto, cover;                      /*第一張背景圖像的大小為父元素寬度的50%，高度自適應；第二張背景圖像填充完整背景*/

此外，設置background-size的默認值為auto還可以實現背景圖片隨鼠標懸浮而放大或縮小的效果。我們可以結合:hover偽類和transition屬性實現這一效果。

    .bg:hover{
        background-size: 120%;      /*鼠標懸浮時，背景圖片放大到120%*/
        transition: 0.5s;           /*過渡效果*/
    }

五、總結

通過以上各種方法，我們可以靈活地控制背景圖片的大小，實現多種有趣的效果。

完整示例代碼：

<!DOCTYPE html>
<html>
<head>
    <title>背景圖像大小的完整控制——background-size</title>
    <style>
        /* 盒模型樣式重置 */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 設置背景圖像 */
        .bg{
            background-image: url("bg.png");
            background-size: 50% auto;
            background-position: right center;
            height: 500px;
        }
        /* 鼠標懸浮時放大 */
        .bg:hover{
            background-size: 120%;
            transition: 0.5s;
        }
    </style>
</head>
<body>
    <div class="bg"></div>
</body>
</html>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/186942.html