CSS - background 屬性

CSS background 屬性是一個簡寫屬性，可以一次設定多個背景屬性。可以一次設定背景顏色、影像、位置、大小、重複、原點、裁剪和附件等屬性。此屬性用於設定元素的外觀樣式。

語法

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;

屬性值

值	描述
background-color	指定要使用的背景顏色。
background-image	指定一個或多個要使用的背景影像。
background-position	指定背景影像的位置。
background-size	指定背景影像的大小。
background-repeat	指定如何重複背景影像。
background-origin	指定背景影像的定位區域。
background-clip	指定背景影像的繪製區域。
background-attachment	指定背景影像的滾動型別。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS 背景屬性示例

以下示例說明了**background**屬性及其各個組成部分的工作方式。

設定背景顏色

**background**屬性的background-color元件設定元素的背景顏色。在下面的示例中，background-color屬性用於將div標籤的背景顏色設定為紅色。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            background-color: red;
            padding: 20px;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <div>
        <p> This is some text.</p>
    </div>
</body>

</html>

設定背景圖片

**background**屬性的background-image元件設定元素的背景圖片。在下面的示例中，background-image屬性用於將背景圖片設定為花朵。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            margin: 0;
            height: 200px;
            background-image: url('/css/images/border.png');
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>

</body>

</html>

設定背景位置

**background**屬性的background-position元件設定元素的背景位置。在下面的示例中，background-position屬性用於將背景位置設定為居中。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #box {
            height: 200px;
            border: 8px solid black;
            padding: 25px;
            background-position: center;
            background-image: url("/css/images/orange-flower.jpg");
        }
    </style>
</head>

<body>

    <h2>The background-position Property</h2>
    <p>Center Position</p>
    <div id="box">
    </div>

</body>

設定背景大小

**background**屬性的background-size元件設定元素的背景大小。在下面的示例中，background-size屬性設定為cover。這將使影像完全適應整個寬度。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body {

            background-image: url("/css/images/orange-flower.jpg");
            height:400px;
            background-size: cover;
            color:white;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
</body>

</html>

設定背景重複

**background**屬性的background-repeat元件確定背景影像的重複方式。在下面的示例中，使用了background-repeat屬性，並將其值設定為repeat-y。影像沿垂直軸重複。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .first {
            padding: 30%;
            background-repeat: repeat-y;
            background-image: url("/css/images/logo.png");
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <p> Repeat along Y direction.</p>
    <div class="first">
    </div>

</body>

</html>

設定背景原點

**background**屬性的background-origin元件確定背景的原點，即影像開始的位置。在下面的示例中，使用了background-repeat屬性，並將其設定為content-box。影像從內容框的邊緣開始。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Origin Example</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: url('/css/images/white-flower.jpg');
            background-origin: content-box;
            padding:20px;
            border: 10px dashed red;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <div class="box"></div>
</body>

</html>

設定背景裁剪

**background**屬性的background-clip元件確定背景影像的繪製區域。在下面的示例中，background-clip屬性與content-box值一起使用。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: url('/css/images/white-flower.jpg');
            background-clip: content-box;
            padding: 20px;
            border: 10px dashed grey;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <div class="box"></div>
</body>

</html>

設定背景附件

**background**屬性的background-attachment元件確定背景影像的滾動型別。在下面的示例中，background-attachment屬性與fixed值一起使用。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            height: 400px;
            background-image: url('/css/images/orange-flower.jpg');
            background-size:cover;
            background-attachment: fixed;
            color: white;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <p>This is a sample text. The image here is fixed.</p>
</body>

</html>

支援的瀏覽器

屬性
background	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面