Css 简明教程

CSS - Multiple Backgrounds

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

Syntax

.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 Multiple Backgrounds - Using background-image property

以下示例演示使用 * 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 Multiple Backgrounds - Using background-size Property

以下示例演示使用 * 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 Multiple Backgrounds - Using background 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* 属性设置全尺寸背景图像 −

<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* 属性设置英雄图像，该图像引用带文本的大图像 −

<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* 属性在框内定位背景图像 −

<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* 属性在框内显示背景图像 −

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