CSS3 背景

CSS3包含多个新的背景属性，他们提供了对背景更强大的控制。

本章将学到一下背景属性:

• background-size
• background-origin

你也将学到如何使用多重背景图片。

浏览器支持：

属性	浏览器支持
background-size
background-origin

Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。

 

1.background-size属性

background-size属性规定背景图片的尺寸。

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

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

1.调整背景图片的大小：

        /*规定背景图片的尺寸*/

        div.backgroundOne {

            width: 200px;

            height: 200px;

            background-image: url(../Images/1.jpg);

            background-repeat: no-repeat;

            background-size: 40px 40px;

            border: 2px solid red;

        }

        /*按百分比*/

        div.backgroundTwo {

            width: 200px;

            height: 200px;

            background-image: url(../Images/1.jpg);

            background-size: 40% 40%;

            background-position: center center;

            background-repeat: no-repeat;

            border: 2px solid blue;

        }

 

2.background-origin 属性

background-origin属性规定背景图片的定位区域。

背景图片可以放置于content-box、padding-box或border-box区域

        /*background-origin属性*/

        div.backgroundOne {

            width: 200px;

            height: 200px;

            float: left;

            background-image: url(../Images/1.jpg);

            background-repeat: no-repeat;

            background-size: 100% 100%;

            background-origin: content-box;

            border: 1px dashed red;

            padding: 10px;

        }

 CSS3多重背景图片

 /*多重背景图片*/

        div.backgroundOne {

            width: 200px;

            height: 100px;

            border: 1px dotted red;

            background-image: url(../Images/add.gif), url(../Images/2.gif),url(../Images/1.jpg);

            background-repeat: no-repeat;

        }