Css 简明教程

CSS - Multiple Backgrounds

在 CSS 中，您可以为元素使用多个背景图像。第一个背景应置于顶部，最后一个背景应置于后面。只有最后一个背景可以有背景颜色。

In CSS, you can use multiple background images for an element. First background should be layered on top, and the last background should be layered behind. Only the last background can have a background color.

Syntax

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

你可以使用简写和单个 background 属性，排除 background-color 。

You can use shorthand and individual background properties, excluding background-color.

以下 background 属性可以作为列表提供，每个背景一个： * background* 、 * background-attachment* 、 * background-clip* 、 * background-image* 、 * background-origin* 、 * background-position* 、 * background-repeat* 、 * background-size* 。

The following background properties can be provided as a list, one for each background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

CSS Multiple Backgrounds - Using background-image property

以下示例演示使用 * background-image* 属性添加两个背景图像，其中第一个图像叠放在顶部，第二个图像在后面 −

The following example demonstrates adding two background images using background-image property, where the first image is stacked on top and the second is behind it −

<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 Multiple Backgrounds - Using background-size Property

以下示例演示使用 * background-size* 属性设置不同大小的多个背景图像。第一张图片的大小为 150px，第二张图片的大小为 300px −

The following example demonstrates the use of multiple background images of different sizes using background-size property. The first image’s size is 150px, and the second image’s size is 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 Multiple Backgrounds - Using background Property

以下示例演示使用简写属性 * background* 添加三个背景图像 −

The following example demonstrates addition of three background images using the shorthand property 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 Multiple Backgrounds - Full Size Image

以下示例演示使用 * background-size: cover* 属性设置全尺寸背景图像 −

The following example demonstrates full sized background image, set using background-size: cover property −

<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 Multiple Backgrounds - Hero Image

以下示例演示使用 <div> 上的不同 * background* 属性设置英雄图像，该图像引用带文本的大图像 −

The following example demonstrates the setting of a hero image, refers to a large image with text using different background properties on <div> −

<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 Multiple Backgrounds - Using background-origin Property

以下示例演示如何使用 * background-origin* 属性在框内定位背景图像 −

The following example demonstrates how the background image is positioned within a box using background-origin property −

<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 Multiple Backgrounds - Using background-clip Property

以下示例演示如何使用 * background-clip* 属性在框内显示背景图像 −

The following example demonstrates how the background image should be displayed within box using background-clip property −

<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>