CSS3 中包含几个新的背景属性，提供更大背景元素控制。
在本章您将了解以下背景属性：
- background-image： CSS3中可以通过background-image属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
- background-size： 规定背景图片的尺寸。
- background-origin： 规定背景图片的定位区域。
- background-clip： 规定背景的绘制区域, CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
background-origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>background-image</h3>
<div style="display: flex; flex-direction: row; justify-content: center;">
<div style="height: 300px; width: 300px; margin: 20px;
background-image: url(./Image/Pic1.jpg), url(./Image/Pic2.png);
background-size: 80px, 100px;
background-repeat: no-repeat, repeat;
"></div>
<div style="height: 300px; width: 300px; margin: 20px;
background: url(./Image/Pic1.jpg) right bottom no-repeat,
url(./Image/Pic2.png) left top repeat;
background-size: 80px;
">
</div>
</div>
<h3>background-origin</h3>
<div style="display: flex; flex-direction: row; justify-content: center;">
<div style="height: 300px; width: 300px; padding: 20px;
border: 10px dotted black;
background-image: url(./Image/Pic1.jpg);
background-repeat: no-repeat;
background-origin: border-box;
">
border-box
</div>
<div style="height: 300px; width: 300px; padding: 20px;
border: 10px dotted black;
background-image: url(./Image/Pic1.jpg);
background-repeat: no-repeat;
background-origin:padding-box;
">
padding-box
</div>
<div style="height: 300px; width: 300px; padding: 20px;
border: 10px dotted black;
background-image: url(./Image/Pic1.jpg);
background-repeat: no-repeat;
background-origin:content-box;
">
content-box
</div>
</div>
<h3>background-clip</h3>
<div style="display: flex; flex-direction: row; justify-content: center;">
<div style="height: 300px; width: 300px; padding: 20px;
border: 10px dotted black;
background-image: url(./Image/Pic1.jpg);
background-repeat: no-repeat;
background-clip: border-box;
">
border-box
</div>
<div style="height: 300px; width: 300px; padding: 20px;
border: 10px dotted black;
background-image: url(./Image/Pic1.jpg);
background-repeat: no-repeat;
background-clip:padding-box;
">
padding-box
</div>
<div style="height: 300px; width: 300px; padding: 20px;
border: 10px dotted black;
background-image: url(./Image/Pic1.jpg);
background-repeat: no-repeat;
background-clip:content-box;
">
content-box
</div>
</div>
</body>
</html>
测试结果
网友评论