CSS3背景

CSS3 背景

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

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

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

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

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

CSS3 多背景

CSS3允许你为一个元素添加多个背景图像, 通过使用 background-image 属性.

不同的背景图像用逗号隔开，图像叠加在一起，其中第一个图像最靠近观察者。

下面的例子有两个背景图像，第一图像是一朵花（在右下角）和第二图像是一个论文的背景（在左上角）：

例如：

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

让我试试

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

下面的例子使用了背景速记（上面的例子，有相同的结果）:

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

让我试试

CSS3 背景尺寸

CSS3 background-size 属性允许你指定背景图像的尺寸.

在CSS3之前的背景图像大小是图像的实际大小。CSS3允许我们使用背景图像在不同的上下文中。

size可以指定长度、百分比，或通过使用一个关键词: contain 或者 cover.

下面的示例图片背景图像比原图像小得多（以像素为单位）:

原来的背景图像:

缩放的背景图:

代码如下：

#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}

让我试试

background-size 属性两个可能值是：contain 和 cover.

含有关键词尺度的背景图像尽可能大的（但它的宽度和高度必须在内容区域）。因此，根据背景图像的比例和背景区的定位，有可能不被背景图像覆盖。

cover 关键词缩放背景图像，内容区域完全覆盖了背景图像（它的宽度和高度等于或超过该范围的内容）。因此，背景图像的某些部分可能不在背景区的定位是可见的。

下面的示例演示了使用contain和cover：

#div1 {
    background: url(img_flower.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
#div2 {
    background: url(img_flower.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

让我试试

定义多个尺寸的背景图像

background-size 属性也接受多个背景值（使用逗号分隔列表），当处理多个背景时。

下面的示例指定三个背景图像，每个图像具有不同的background-size值：

#example1 {
    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
}

让我试试

全尺寸的背景图片

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

要求如下:

填满整个页面的图像（没有空白）

1. 缩放图像

2. 图像居中页面

3. 没有滚动条

下面的示例演示如何使用HTML元素（HTML元素始终是浏览器窗口的高度）。然后设置一个固定中心的背景上。然后用background-size属性调整它的大小：

html {
    background: url(img_flower.jpg) no-repeat center fixed;
    background-size: cover;
}

让我试试

CSS3 background-origin 属性

CSS3 background-origin 属性指定在背景图像定位在哪里.

这个属性有三个不同的值：

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

下面的例子说明了background-origin属性：

#example1 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: content-box;
}

让我试试

CSS3 background-clip 属性

CSS3 background-clip 属性指定背景的绘制面积.

该属性有三个不同的值:

border-box - (默认) 背景是画的边框外边缘 padding-box-背景被显示到填充物的外缘。 content-box - 背景是画在内容框内

下面举例演示了background-clip属性:

#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}

让我试试

CSS3 Background 属性