CSS3 背景
CSS3 包含多個新的背景屬性，它們提供了對背景更強大的控制
background-size
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body
{
background:url(bg.jpg);
background-size:150px 100px;
background-repeat:no-repeat;
padding-top:80px;
}
}
</style>
</head>
<body>
<p>上面是縮小的背景圖片。</p>
<p>原始圖片：<img src="bg.jpg" alt="Flowers"></p>
</body>
</html>
CSS3 background-origin 屬性
background-origin 屬性規定背景圖片的定位區域。
背景圖片可以放置於 content-box、padding-box 或 border-box 區域。
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('bg.jpg');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:padding-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
內容 內容 內容 內容 內容 內容 內容 內容內容 內容內容 內容內容 內容。
</div>
<p>background-origin:content-box:</p>
<div id="div2">
內容 內容 內容 內容 內容 內容內容 內容內容 內容 內容 內容內容 內容 。
</div>
</body>
</html>
CSS3 多重背景圖片
CSS3 允許您爲元素使用多個背景圖像。
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url(bg.jpg),url(bg.jpg);
}
</style>
</head>
<body>
</body>
</html>