CSS3 背景属性 - 多重背景与尺寸控制

最后编辑于2025-04-14 12:08:37.164419 +0800 CST

CSS3 背景 ¶

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

在本章您将了解以下背景属性：

background-image - 支持多重背景图像
background-size - 控制背景图像的尺寸
background-origin - 指定背景图像的定位区域
background-clip - 指定背景绘制的区域

浏览器支持 ¶

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性	Chrome	IE	Firefox	Safari	Opera
background-image (with multiple backgrounds)	4.0	9.0	3.6	3.1	11.5
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-
background-origin	1.0	9.0	4.0	3.0	10.5
background-clip	4.0	9.0	4.0	3.0	10.5

CSS3 多重背景图像 ¶

CSS3中可以通过background-image属性添加多个背景图片。

不同的背景图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

示例：添加多重背景 ¶

css

1#example1 { 
2    background-image: url(img_flwr.gif), url(paper.gif); 
3    background-position: right bottom, left top; 
4    background-repeat: no-repeat, repeat; 
5}

可以给不同的图片设置多个不同的属性，也可以使用简写形式：

css

1#example1 {
2    background: url(img_flwr.gif) right bottom no-repeat, 
3                url(paper.gif) left top repeat;
4}

CSS3 background-size 属性 ¶

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片的尺寸，让我们能够在不同的环境中重新调整背景图片的大小。您可以指定像素或百分比大小。

指定的大小是相对于父元素的宽度和高度的百分比的大小。

示例1：指定背景图像的确切大小 ¶

css

1div {
2    background: url(img_flwr.gif);
3    background-size: 80px 60px;
4    background-repeat: no-repeat;
5}

示例2：伸展背景图像填充整个元素 ¶

css

1div {
2    background: url(img_flwr.gif);
3    background-size: 100% 100%;
4    background-repeat: no-repeat;
5}

示例3：保持宽高比的背景图像 ¶

css

1div {
2    background: url(img_flwr.gif);
3    background-size: contain; /* 保持宽高比并确保图像完全可见 */
4    background-repeat: no-repeat;
5}

CSS3的background-Origin属性 ¶

background-Origin属性指定了背景图像的位置区域。

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

示例：设置背景图像的定位区域 ¶

css

1div {
2    background: url(img_flwr.gif);
3    background-repeat: no-repeat;
4    background-size: 100% 100%;
5    background-origin: content-box; /* 背景图从内容区开始 */
6}

三种可能的值：

border-box - 背景图像从边框左上角开始
padding-box - 背景图像从内边距左上角开始（默认值）
content-box - 背景图像从内容区域左上角开始

CSS3 background-clip属性 ¶

CSS3中background-clip背景剪裁属性用于指定背景的绘制区域。

示例：限制背景绘制区域 ¶

css

1#example1 { 
2    border: 10px dotted black; 
3    padding: 35px; 
4    background: yellow; 
5    background-clip: content-box; /* 背景仅在内容区域内绘制 */
6}