免費(fèi)AI編程助手
CSS3 背景
2018-01-16 18:47 更新
CSS3有以下三個(gè)背景屬性，我們可以使用樣式的元素背景。
- background-clip
- background-size
- background-origin
background-clip 指定背景圖像的繪制區(qū)域
background-size 屬性設(shè)置背景圖像的大小。
background-origin 屬性指定背景圖像的定位區(qū)域。
background-clip
background-clip 屬性指定背景的繪制區(qū)域。
<!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>
上面的代碼呈現(xiàn)如下：
background-clip的值可以是下列值之一：
- border-box
- padding-box
- content-box
- initial
- inherit
background-origin
background-origin 屬性指定背景圖像的定位區(qū)域。
背景圖像可以放置在 content-box 中， padding-box 或 border-box 區(qū)域。
+-----------------------------+ |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>
上面的代碼呈現(xiàn)如下：
background-size
background-size 屬性設(shè)置背景圖像的大小。
下面的代碼顯示了如何調(diào)整背景圖像的大小。
<!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>
例子
下面的示例演示如何拉伸背景圖像以完全填充內(nèi)容區(qū)域。
<!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>
上面的代碼呈現(xiàn)如下：
以上內(nèi)容是否對(duì)您有幫助：
← CSS3 邊框
更多建議：