背景

CSS3 Background 中包含几个新的背景属性,提供更大背景元素控制。

主要是2个背景属性:

  • background-size
  • background-origin

您还将学习如何使用多重背景图像。

background-size

该属性规定背景图片的尺寸。

在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。

您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

  1. .background-size {
  2. background: url(images/wl_white.png);
  3. background-size: 100px 40px;
  4. -moz-background-size: 100px 40px; /* Firefox 3.6 */
  5. -webkit-background-size: 100px 40px;
  6. background-repeat: no-repeat;
  7. padding-top: 40px;
  8. }

background-origin

该属性指定了背景图像的位置区域。

content-box, padding-box,和 border-box 区域内可以放置背景图像。

背景 - 图1

  1. .background-origin-border {
  2. width: 250px;
  3. height: 250px;
  4. border: 1px dotted green;
  5. padding: 25px;
  6. background-image: url('images/border.png');
  7. background-repeat: no-repeat;
  8. background-position: left;
  9. background-origin: border-box;
  10. }
  11. .background-origin-content {
  12. width: 250px;
  13. height: 250px;
  14. border: 1px dotted green;
  15. padding: 25px;
  16. background-image: url('images/border.png');
  17. background-repeat: no-repeat;
  18. background-position: left;
  19. background-origin: content-box;
  20. }

源码

本文中所用例子源码参见
https://github.com/waylau/css3-tutorialsamples 目录下的 background_size.html、background_origin.html