編程教程CSS3 背景
CSS3有以下三個背景屬性，我們可以使用樣式的元素背景。
- background-clip
- background-size
- background-origin
background-clip指定背景圖像的繪制區域
background-size屬性設置背景圖像的大小。
background-origin屬性指定背景圖像的定位區域。
background-clip
background-clip屬性指定背景的繪制區域。
<!DOCTYPE html>
<html>
<head>
<style>
div {width: 200px;height: 200px;padding: 50px;background-color: yellow;background-clip: content-box;border: 2px solid #92b901;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</div>
</body>
</html>上面的代碼呈現如下：
background-clip的值可以是下列值之一：
- border-box
- padding-box
- content-box
- initial
- inherit
background-origin
background-origin屬性指定背景圖像的定位區域。
背景圖像可以放置在content-box中，padding-box或border-box區域。
+-----------------------------+ |border-box | | +--------------------+ | | |padding-box | | | | +--------------+ | | | | |Content-box | | | | | | | | | | | +--------------+ | | | | | | | +--------------------+ | | | +-----------------------------+
以下代碼顯示了如何使用background-origin為不同的值。
<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;padding: 35px;background-image: url("http://placehold.it/100x100");background-repeat: no-repeat;background-position:left;
}
#div1 {background-origin:border-box;
}
#div2 {background-origin: content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</div>
<p>background-origin:content-box:</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>上面的代碼呈現如下：
background-size
background-size屬性設置背景圖像的大小。
下面的代碼顯示了如何調整背景圖像的大小。
<!DOCTYPE html>
<html>
<head>
<style>
body {background: url(http://placehold.it/100x100);background-size: 80px 60px;background-repeat: no-repeat;padding-top: 40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</p>
<p>Original image: <img src="http://placehold.it/100x100"width="224"height="162"></p>
</body>
</html>例子
下面的示例演示如何拉伸背景圖像以完全填充內容區域。
<!DOCTYPE html>
<html>
<head>
<style>
body {background: url(http://placehold.it/100x100);background-size: 100% 100%;background-repeat: no-repeat;padding-top: 40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</p>
<p>Original image: <img src="http://placehold.it/100x100"width="224"height="162"></p>
</body>
</html>上面的代碼呈現如下：
