CSS - 背景

上一頁
下一頁

CSS 背景屬性用於在 HTML 內容後面設定顏色、漸變或影像。有幾個與背景相關的 CSS 屬性用於設定顏色、大小、影像、重複行為和位置。在本節中，我們將討論所有與 CSS 背景相關的屬性及其用例。

CSS 背景示例

以下部分顯示了為 HTML 元素設定顏色、影像和漸變的示例。

背景：無
背景：顏色
背景：漸變
背景：影像
嘗試不同的背景選項

目錄


 

背景簡寫屬性

background 是以下屬性的簡寫

background: [bg-color] [bg-image] [bg-position]/[bg-size] [bg-repeat]
            [bg-origin] [bg-clip] [bg-attachment];

/* Example */
background: green url('image.jpg') top/20% no-repeat border-box 
            content-box fixed;

如果要新增background-size，則必須將其緊跟在background-position之後，並用“/”分隔。例如：“left/50%”。

背景顏色屬性

在 CSS 中，我們可以使用background-color 屬性為 div、span、body、段落等元素設定背景顏色。

示例

這裡我們為 body 和 div 標籤使用了三種不同的顏色值，有關 CSS 中顏色的完整參考，請檢視CSS 顏色章節。

<!DOCTYPE html>
<html>

<head>
    <style>  
        body {
            background-color: lightgray;
        }
        div{
            padding: 25px;
        }
        .firstDiv{
            background-color: rgb(255, 215, 0);
        }
        .secondDiv{
            background-color: #f0f0f0;
        }
        .thirdDiv{
            background-color: hsl(120, 100%, 75%);
        }
    </style>
</head>

<body>
    <h2>CSS Background Colors</h2>
    Body Color: lightgray; <br>  <br>
    <div class="firstDiv"> Color: rgb(255, 215, 0) </div> <br>
    <div class="secondDiv"> Color: #f0f0f0</div> <br>
    <div class="thirdDiv"> Color: hsl(120, 100%, 75%)</div>
</body>

</html>

背景影像屬性

CSS 允許將影像設定為另一個元素（如 div、span、body、段落等）的背景。

background-image 屬性用於設定一個或多個影像作為背景。

注意：您可以新增多個影像作為背景。您只需要用逗號分隔影像。

示例

在這個示例中，我們為 body 元素設定了一個背景影像。

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

<head>
    <style>
        div{
            background-color: rgba(255, 255, 255);
            opacity: 70%;
            padding: 20px;
        }
        body {
            background-image: url(/css/images/logo.png);
            height: 350px;
        }
    </style>
</head>

<body>
    <div>
        <h1>Welcome to My Website</h1>
        <p>
            This is an example of setting a 
            background image using CSS
        </p>
    </div>
</body>

</html>

背景位置屬性

background-position 屬性設定元素背景影像的初始位置。影像的位置相對於background-origin屬性設定的值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>  
        .position-right {
            background-image: url('/css/images/tutimg.png');
            background-position: right;
            background-repeat: no-repeat;
            width: 100%;
            height: 300px;
            border: 3px solid black;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="position-right"></div>
</body>

</html>

背景大小屬性

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

示例

<!DOCTYPE html>
<html>

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

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

</html>

背景重複屬性

CSS background-repeat 屬性控制背景上影像的重複。影像可以在水平和垂直軸上重複，也可以不重複。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .repeat {
            background-image: url('/css/images/tutimg.png');
            background-repeat: repeat;
            width: 800px;
            height: 400px;
            position: relative;
        }
    </style>
</head>

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

</html>

背景原點屬性

CSS background-origin 屬性用於設定背景的原點，可以是從邊框的開始、邊框內或填充內。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 10px rgb(13, 7, 190);
            border-style: dashed;
            margin: 5px;
            padding: 1cm;
            font: 700 1em sans-serif;
            color: aliceblue;
            display: inline-block;
            background-image: url('/css/images/yellow-flower.jpg');
            height: 200px;
            width: 200px;
            background-size: contain;
        }

        .content-box {
            background-origin: content-box;
        }
    </style>
</head>

<body>
    <div class="content-box"> </div>
    <p> 
        This image background start from content box of 
        div element.
    </p>
</body>

</html>

背景附件屬性

CSS background-attachment 屬性決定背景上影像的位置是在視口中固定還是在其容器內滾動。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .fixed {
            background-image: url('images/logo.png');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: left top;
            background-color: lightblue;
            background-size: 40% 30%;
            padding: 5rem;
            width: 250px;
            height: 500px;
        }
    </style>
</head>

<body>
    <h2>CSS background-attachment Property</h2>
    <div class="fixed">
        <p>
            Lorem Ipsum is simply dummy text of the printing 
            and typesetting industry. Lorem Ipsum has been the 
            industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and 
            scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also 
            the leap into electronic typesetting, remaining 
            essentially unchanged. It was popularized in the 
            1960s with the release of Letraset sheets containing 
            Lorem Ipsum passages, and more recently with desktop 
            publishing software like Aldus PageMaker including 
            versions of Lorem Ipsum.
        </p>
    </div>
</body>

</html>

背景剪裁屬性

CSS background-clip 屬性用於指定如何在元素的填充框、邊框框或內容框內顯示背景影像或顏色。它決定將背景應用於元素的哪個區域。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            border: 10px dotted black;
            padding: 15px;
            background: green;
            color: white;
        }

        .border-area {
            background-clip: border-box;
        }
        .padding-area {
            background-clip: padding-box;
        }
    </style>
</head>

<body>
    <h2>CSS background-clip property</h2>
    <p class="border-area">
        Background applied to the entire element.
    </p>
    <p class="padding-area">
        Background applied to the content & padding area.
    </p>

</body>

</html>

CSS 背景所有屬性

與background相關的屬性都列在下表中

屬性 描述 示例
background 背景相關屬性的簡寫。
background-attachment 指定背景相對於視口的位置，固定或可滾動。
background-clip 控制背景影像延伸到元素的填充或內容框之外的程度。
background-color 設定元素的背景顏色。
background-image 在一個元素上設定一個或多個背景影像。
background-origin 設定背景的原點。
background-position 設定背景中每個影像的初始位置。
background-position-x 設定背景中每個影像的初始水平位置。
background-position-y 設定背景中每個影像的初始垂直位置。
background-repeat 控制背景中影像的重複。
background-size 控制背景影像的大小。
background-blend-mode 確定元素的背景影像如何相互混合。
列印頁面
上一頁
下一頁
廣告