参考手册
CSS3 边框图像
CSS3 文本效果

CSS3 多重背景

在本章中，您将学习如何将多个背景图像添加到一个元素。

您还将学到以下属性：

  • background-size
  • background-origin
  • background-clip

CSS 多重背景

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #example1 {
  6.   background-image: url(/images/img_flwr.gif), url(/images/paper.jpg);
  7.   background-position: right bottom, left top;
  8.   background-repeat: no-repeat, repeat;
  9.   padding: 15px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  15. <h2>多重背景</h2>
  16. <p>下面的 div 元素有两副背景图像：</p>
  18. <div id="example1">
  19.   <h2>欢迎来到成都</h2>
  20.   <p>成都，是四川省省会、副省级市、特大城市、成渝地区双城经济圈核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽。</p>
  21.   <p>成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富、农业发达，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</p>
  22. </div>
  24. </body>
  25. </html>
运行一下

多重背景图像可以使用单独的背景属性（如上所述）或 background 简写属性来指定。

下面的例子使用 background 简写属性（结果与上例相同）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #example1 {
  6.   background: url(/images/img_flwr.gif) right bottom no-repeat, url(/images/paper.gif) left top repeat;
  7.   padding: 15px;
  8. }
  9. </style>
  10. </head>
  11. <body>
  13. <div id="example1">
  14.   <h2>欢迎来到成都</h2>
  15.   <p>成都，是四川省省会、副省级市、特大城市、成渝地区双城经济圈核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽。</p>
  16.   <p>成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富、农业发达，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</p>
  17. </div>
  19. </body>
  20. </html>
运行一下

CSS 背景尺寸

CSS background-size 属性允许您指定背景图像的大小。

可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。

下面的例子将背景图像的大小调整为比原始图像小得多（使用像素）：

Lorem Ipsum Dolor

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.

这是代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #example1 {
  6.   border: 1px solid black;
  7.   background: url(/images/img_flwr.gif);
  8.   background-size: 100px 80px;
  9.   background-repeat: no-repeat;
  10.   padding: 15px;
  11. }
  13. #example2 {
  14.   border: 1px solid black;
  15.   background: url(/images/img_flwr.gif);
  16.   background-repeat: no-repeat;
  17.   padding: 15px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  23. <h2>background-size 属性</h2>
  25. <p>被调整大小的 background-image:</p>
  26. <div id="example1">
  27.   <h2>欢迎来到成都</h2>
  28.   <p>成都，是四川省省会、副省级市、特大城市、成渝地区双城经济圈核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽。</p>
  29.   <p>成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富、农业发达，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</p>
  30. </div>
  32. <p>background-image 的原始尺寸：</p>
  33. <div id="example2">
  34.   <h2>欢迎来到武汉</h2>
  35.   <p>武汉，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽。</p>
  36.   <p>武汉地处江汉平原东部、长江中游，长江及其最大支流汉江在城中交汇，形成武汉三镇（武昌、汉口、汉阳）隔江鼎立的格局，市内江河纵横、湖港交织，水域面积占全市总面积四分之一。</p>
  37. </div>
  39. </body>
  40. </html>
运行一下

background-size 的其他两个可能的值是 contain 和 cover。

contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。

cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。

下面的例子展示了 contain 和 cover 的用法：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .div1 {
  6.   border: 1px solid black;
  7.   height: 120px;
  8.   width: 150px;
  9.   background: url(/i/photo/img_flwr.gif);
  10.   background-repeat: no-repeat;
  11.   background-size: contain;
  12. }
  14. .div2 {
  15.   border: 1px solid black;
  16.   height: 120px;
  17.   width: 150px;
  18.   background: url(/images/img_flwr.gif);
  19.   background-repeat: no-repeat;
  20.   background-size: cover;
  21. }
  23. .div3 {
  24.   border: 1px solid black;
  25.   height: 120px;
  26.   width: 150px;
  27.   background: url(/images/img_flwr.gif);
  28.   background-repeat: no-repeat;
  29. }
  30. </style>
  31. </head>
  32. <body>
  34. <h2>background-size 属性</h2>
  36. <h2>background-size: contain:</h2>
  37. <div class="div1">
  38. <p>Lorem ipsum dolor sit amet.</p>
  39. </div>
  41. <h2>background-size: cover:</h2>
  42. <div class="div2">
  43. <p>Lorem ipsum dolor sit amet.</p>
  44. </div>
  46. <h2>background-size 未定义：</h2>
  47. <div class="div3">
  48. <p>Lorem ipsum dolor sit amet.</p>
  49. </div>
  51. <p>原始图像：</p>
  52. <img src="/images/img_flwr.gif" alt="Flowers" width="224" height="162">
  54. </body>
  55. </html>
运行一下

定义多个背景图像的尺寸

在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）。

下面的例子指定了三幅背景图像，每幅图像有不同的 background-size 值：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #example1 {
  6.   background: url(/images/img_tree.gif) left top no-repeat, url(/images/img_flwr.gif) right bottom no-repeat, url(/images/paper.jpg) left top repeat;
  7.   padding: 15px;
  8.   background-size: 50px, 130px, auto;
  9. }
  10. </style>
  11. </head>
  12. <body>
  14. <div id="example1">
  15.   <h2>欢迎来到成都</h2>
  16.   <p>成都，是四川省省会、副省级市、特大城市、成渝地区双城经济圈核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽。</p>
  17.   <p>成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富、农业发达，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</p>
  18. </div>
  20. </body>
  21. </html>
运行一下

全尺寸背景图像

现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口。

具体要求如下：

  • 用图像填充整个页面（无空白）
  • 根据需要缩放图像
  • 在页面上居中图像
  • 不引发滚动条

下面的例子显示了如何实现它：使用 <html> 元素（<html> 元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。最后使用 background-size 属性调整其大小：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. html {
  6.   background: url(/images/img_man.jpg) no-repeat center fixed;
  7.   background-size: cover;
  8. }
  10. body {
  11.   color: white;
  12. }
  13. </style>
  14. </head>
  15. <body>
  17. <h2>完整页面的背景图像</h2>
  18. <p>成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富、农业发达，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</p>
  20. </body>
  21. </html>
运行一下

Hero Image

您还可以在 <div> 上使用不同的背景属性来创建 Hero Image（带有文本的大图像），并将其放置在您希望的位置上。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. body {
  7.   margin: 0;
  8.   font-family: Arial, Helvetica, sans-serif;
  9. }
  11. .hero-image {
  12.   background: url(/images/img_man.jpg) no-repeat center;
  13.   background-size: cover;
  14.   height: 500px;
  15.   position: relative;
  16. }
  18. .hero-text {
  19.   text-align: center;
  20.   position: absolute;
  21.   top: 50%;
  22.   left: 50%;
  23.   transform: translate(-50%, -50%);
  24.   color: white;
  25. }
  26. </style>
  27. </head>
  28. <body>
  30. <div class="hero-image">
  31.   <div class="hero-text">
  32.     <h2 style="font-size:50px">我是马斯克</h2>
  33.     <h3>我是一位摄影师</h3>
  34.     <button>聘请我吧</button>
  35.   </div>
  36. </div>
  38. <p>页面内容..</p>
  39. <p>请注意，这项技术会将使图像响应：请调整浏览器窗口的大小来查看效果。</p>
  41. </body>
  42. </html>
运行一下

CSS background-origin 属性

CSS background-origin 属性指定背景图像的位置。该属性接受三个不同的值：

  • border-box - 背景图片从边框的左上角开始
  • padding-box -背景图像从内边距边缘的左上角开始（默认）
  • content-box - 背景图片从内容的左上角开始

下面的示例展示了 background-origin 属性：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #example1 {
  6.   border: 10px solid black;
  7.   padding: 35px;
  8.   background: url(/images/img_flwr.gif);
  9.   background-repeat: no-repeat;
  10. }
  12. #example2 {
  13.   border: 10px solid black;
  14.   padding: 35px;
  15.   background: url(/images/img_flwr.gif);
  16.   background-repeat: no-repeat;
  17.   background-origin: border-box;
  18. }
  20. #example3 {
  21.   border: 10px solid black;
  22.   padding: 35px;
  23.   background: url(/images/img_flwr.gif);
  24.   background-repeat: no-repeat;
  25.   background-origin: content-box;
  26. }
  27. </style>
  28. </head>
  29. <body>
  31. <h2>background-origin 属性</h2>
  33. <p>未设置 background-origin (padding-box 为默认):</p>
  34. <div id="example1">
  35.   <h2>欢迎来到上海</h2>
  36.   <p>上海，简称“沪”或“申”，是中华人民共和国省级行政区、直辖市、国家中心城市、超大城市、上海大都市圈核心城市，国务院批复确定的中国国际经济、金融、贸易、航运、科技创新中心。</p>
  37.   <p>上海地处中国东部、长江入海口、东临东中国海，北、西与江苏、浙江两省相接。</p>
  38. </div>
  40. <p>background-origin: border-box:</p>
  41. <div id="example2">
  42.   <h2>欢迎来到成都</h2>
  43.   <p>成都，是四川省省会、副省级市、特大城市、成渝地区双城经济圈核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽。</p>
  44.   <p>成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富、农业发达，属亚热带季风性湿润气候，自古有“天府之国”的美誉。</p>
  45. </div>
  47. <p>background-origin: content-box:</p>
  48. <div id="example3">
  49.   <h2>欢迎来到武汉</h2>
  50.   <p>武汉，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽。</p>
  51.   <p>武汉地处江汉平原东部、长江中游，长江及其最大支流汉江在城中交汇，形成武汉三镇（武昌、汉口、汉阳）隔江鼎立的格局，市内江河纵横、湖港交织，水域面积占全市总面积四分之一。</p>
  52. </div>
  54. </body>
  55. </html>
运行一下

CSS background-clip 属性

CSS background-clip 属性指定背景的绘制区域。该属性接受三个不同的值：

  • border-box - 背景绘制到边框的外部边缘（默认）
  • padding-box - 背景绘制到内边距的外边缘
  • content-box - 在内容框中绘制背景

下面的例子展示了 background-clip 属性：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #example1 {
  6.   border: 10px dotted black;
  7.   padding: 35px;
  8.   background: yellow;
  9. }
  11. #example2 {
  12.   border: 10px dotted black;
  13.   padding: 35px;
  14.   background: yellow;
  15.   background-clip: padding-box;
  16. }
  18. #example3 {
  19.   border: 10px dotted black;
  20.   padding: 35px;
  21.   background: yellow;
  22.   background-clip: content-box;
  23. }
  24. </style>
  25. </head>
  26. <body>
  28. <h2>background-clip 属性</h2>
  30. <p>No background-clip (border-box is default):</p>
  31. <div id="example1">
  32.   <h2>欢迎来到上海</h2>
  33.   <p>上海，简称“沪”或“申”，是中华人民共和国省级行政区、直辖市、国家中心城市、超大城市、上海大都市圈核心城市，国务院批复确定的中国国际经济、金融、贸易、航运、科技创新中心。</p>
  34. </div>
  36. <p>background-clip: padding-box:</p>
  37. <div id="example2">
  38.   <h2>欢迎来到成都</h2>
  39.   <p>成都，是四川省省会、副省级市、特大城市、成渝地区双城经济圈核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽。</p>
  40. </div>
  42. <p>background-clip: content-box:</p>
  43. <div id="example3">
  44.   <h2>欢迎来到武汉</h2>
  45.   <p>武汉，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽。</p>
  46. </div>
  48. </body>
  49. </html>
运行一下

CSS 高级背景属性

属性描述
background用于在一条声明中设置所有背景属性的简写属性。
background-clip规定背景的绘制区域。
background-image为一个元素指定一幅或多幅背景图像。
background-origin规定背景图像的放置位置。
background-size规定背景图像的大小。
CSS3 边框图像
CSS3 文本效果

分类导航