CSS - background-size 屬性

CSS background-size 屬性用於設定元素背景影像的大小。背景影像可以拉伸、約束或保持其原始大小。

語法

background-size: auto | length | cover | contain | initial | inherit;

屬性值

值	描述
auto	背景影像以其原始大小顯示。預設值。
長度值	這將設定背景影像的尺寸。第一個值指定寬度，第二個值指定高度；如果只給出一個值，則高度預設為 auto。
百分比	這將背景影像尺寸設定為父元素的百分比。第一個值指定寬度，第二個值指定高度；如果只提供一個值，則高度預設為 auto。
cover	背景影像將調整大小以確保其完全填充容器。在此過程中可能會進行拉伸或裁剪。
contain	背景影像將調整大小以確保其完全可見。
initial	這將屬性設定為其初始值。
inherit	這將從父元素繼承該屬性。

CSS background-size 屬性示例

以下示例將描述 background-size 屬性。

影像原始大小

為了顯示影像的原始大小而無需任何更改，我們使用 auto 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .size-auto {
            background-image: url('/css/images/pink-flower.jpg');
            background-size: auto;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>CSS background-size property</h2>
    <div class="size-auto"></div>
</body>

</html>

使用長度值設定影像大小

要為影像設定特定大小，我們可以指定長度值，寬度將相應調整。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .size-length {
            background-image: url('/css/images/pink-flower.jpg');
            background-size: 150px;
            background-repeat: no-repeat;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>CSS background-size property</h2>
    <div class="size-length"></div>
</body>

</html>

使用百分比定義影像大小

影像的大小也可以用百分比來指定，我們指定百分比值來獲得所需的大小。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .size-percent {
            background-image: url('/css/images/pink-flower.jpg');
            background-repeat: no-repeat;
            background-size: 90%;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>CSS background-size property</h2>
    <div class="size-percent"></div>
</body>

</html>

影像完全可見

要將影像的大小設定為儘可能大以適合容器而不裁剪或拉伸，我們使用 contain 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .size-contain {
            background-image: url('/css/images/pink-flower.jpg');
            background-size: contain;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>CSS background-size property</h2>
    <div class="size-contain"></div>
</body>

</html>

影像完全填充

要將影像的大小設定為儘可能小以適合容器而不留空隙，我們使用 cover 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .size-cover {
            background-image: url('/css/images/pink-flower.jpg');
            background-size: cover;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <h2>CSS background-size property</h2>
    <div class="size-cover"></div>
</body>

</html>

支援的瀏覽器

屬性
background-size	4.0	9.0	4.0	4.1	10.5

css_properties_reference.htm

列印頁面