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 控制背景图片的大小。
打印页面
上一页
下一页
广告