CSS - 多背景

上一頁
下一頁

在 CSS 中，您可以為一個元素使用多個背景圖片。第一個背景應該位於最頂層，最後一個背景應該位於最底層。只有最後一個背景可以有背景顏色。

語法

.multibackgrounds {
   background:
      background1,
      background2,
      /* …, */ backgroundN;
}

您可以使用簡寫和單個background屬性，但不包括background-color。

以下background屬性可以作為一個列表提供，每個背景一個：background，background-attachment，background-clip，background-image，background-origin，background-position，background-repeat，background-size。

CSS 多背景 - 使用 background-image 屬性

下面的例子演示瞭如何使用background-image屬性新增兩個背景圖片，其中第一張圖片疊加在上面，第二張圖片在下面：

<html>
<head>
<style>
   .multibackgrounds {
      background-image: url(images/logo.png), url(images/see.jpg);
      background-position: left top, right top;
      background-repeat: no-repeat, repeat;
      padding: 70px;
   }
</style>
</head>
<body>
   <div class="multibackgrounds">
      <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.</p>
   </div>
</body>
</html>

CSS 多背景 - 使用 background-size 屬性

下面的例子演示瞭如何使用background-size屬性使用不同大小的多個背景圖片。第一張圖片的大小是 150px，第二張圖片的大小是 300px：

<html>
<head>
<style>
   .multibackgrounds{
      background-image: url(images/logo.png), url(images/see.jpg);
      background-position: left top, right top;
      background-repeat: no-repeat, repeat;
      padding: 70px;
   }
   .multibackgrounds-size {
      background-image: url(images/logo.png), url(images/see.jpg);
      background-position: left top, right top;
      background-repeat: no-repeat, repeat;
      background-size: 150px, 300px;
      padding: 70px;
   }
</style>
</head>
<body>
      <h3>Without Sizing</h3>
   <div class="multibackgrounds">
      <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.</p>
   </div><br>
   <h3>With Sizing</h3>
   <div class="multibackgrounds-size">
      <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.</p>
   </div>
</body>
</html>

CSS 多背景 - 使用 background 屬性

下面的例子演示瞭如何使用簡寫屬性background新增三個背景圖片：

<html>
<head>
<style>
   .multibackgrounds-size {
      background: url(images/logo.png),  url(images/pink-flower.jpg), url(images/see.jpg);
      background-position: left top, center, right top;
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-size: 150px, 100px, 550px;
      padding: 70px;
      color: yellow;
   }
</style>
</head>
<body>
   <div class="multibackgrounds-size">
      <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.</p>
   </div>
</body>
</html>

CSS 多背景 - 全尺寸圖片

下面的例子演示瞭如何使用background-size: cover屬性設定全尺寸背景圖片：

<html>
<head>
<style> 
   html { 
      background: url(images/red-flower.jpg) no-repeat center fixed; 
      background-size: cover;
      color: yellow; 
   }
</style>
</head>
<body>
   <h1>Red Flower Image</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>

CSS 多背景 - 英雄圖

下面的例子演示瞭如何設定英雄圖，指的是帶有文字的大圖片，在 <div> 上使用不同的background屬性：

<html>
<head>
<style>
   .background-img {
      background: url(images/see.jpg) no-repeat center; 
      background-size: cover;
      height: 300px;
      position: relative;
   }
   .background-text {
      text-align: center;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: red;
   }
   button {
         background-color: yellow;
         padding: 10px;
   }
</style>
</head>
<body>
   <div class="background-img">
      <div class="background-text">
         <h1>See Image</h1>
            <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.</p>
         <button>Click Me</button>
      </div>
   </div>
</body>
</html>

CSS 多背景 - 使用 background-origin 屬性

下面的例子演示瞭如何使用background-origin屬性在盒子內定位背景圖片：

<html>
<head>
<style>
   div {
      width: 200px;
      height: 150px;
      border: 7px solid blue;
      padding: 30px;
      background: url(images/pink-flower.jpg);
      background-repeat: no-repeat;
      margin: 10px;
   }
   P {
      color: yellow;
   }
   h3 {
      color: red;
   }
   .box1 {
      background-origin: padding-box;
   }
   .box2 {
      background-origin: border-box;
   }
   .box3 {
      background-origin: content-box;
   }
</style>
</head>
<body>
   <div class="box1">
      <h3>background-origin: padding-box</h3>
      <p>Background image is positioned relative to the padding box.</p>
   </div>
   <div class="box2">
      <h3>background-origin: border-box</h3>
      <p>Background image is positioned relative to the border box.</p>
   </div>
   <div class="box3">
      <h3>background-origin: content-box</h3>
      <p>Background image is positioned relative to the content box.</p>
   </div>
</body>
</html>

CSS 多背景 - 使用 background-clip 屬性

下面的例子演示瞭如何使用background-clip屬性在盒子內顯示背景圖片：

<html>
<head>
<style>  
   p {
      width: 200px;
      height: 150px;
      border: 8px solid blue;
      margin: 10px;
      padding: 30px;
      color: yellow;
      background: url(images/pink-flower.jpg);
   }
   .box1 {
      background-clip: border-box;
   }
   .box2 {
      background-clip: padding-box;
   }
   .box3 {
      background-clip: content-box;
   }
</style>
</head>
<body>
   <p class="box1">Background image is applied to the entire element.</p>
   <p class="box2">Background image is applied to the padding area.</p>
   <p class="box3">Background image is applied only to the content area.</p>
</body>
</html>

CSS 多背景 - 相關屬性

下表列出了所有與background相關的屬性

屬性 描述
background 背景相關屬性的簡寫。
background-attachment 指定背景相對於視口的位置，是固定的還是可滾動的。
background-clip 控制背景圖片延伸到元素填充或內容框之外的程度。
background-image 在一個元素上設定一個或多個背景圖片。
background-origin 設定背景的原點。
background-position 設定背景中每個影像的初始位置。
background-repeat 控制背景中影像的重複。
background-size 控制背景圖片的大小。
列印頁面
上一頁
下一頁
廣告