background-clip 屬性規定背景的繪制區域。
默認值： border-box
繼承性： no
版本： CSS3
JavaScript 語法： object.style.backgroundClip=“content-box”
background-clip: border-box|padding-box|content-box;
border-box 背景被裁剪到邊框盒。 測試
padding-box 背景被裁剪到內邊距框。 測試
content-box 背景被裁剪到內容框。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>背景的顯示區域</title>
<style type="text/css">
div {
padding:50px; /* 設置內邊距為50px */
border:50px solid rgba(255, 153, 0, 0.6); /* 設置邊框寬度為50px */
height:100px;
width:200px;
color:#fff;
font-size:24px;
font-weight:bold;
text-shadow:2px 0 1px #f00,
-2px 0 1px #f00,
0 2px 1px #f00,
0 -2px 1px #f00;
background-image:url(../images/Bridge.jpg); /* 設置背景圖像 */
background-position:0 0; /* 背景圖像起始位為原點 */
background-repeat:no-repeat; /* 背景圖像不平鋪 */
-webkit-background-origin:border-box; /* 原點從邊框開始（webkit） */
-moz-background-origin:border-box; /* 原點從邊框開始（moz） */
background-origin:border-box; /* 原點從邊框開始 */
-webkit-background-clip:border-box; /* 背景從邊框開始顯示（webkit） */
-moz-background-clip:border-box; /* 背景從邊框開始顯示（moz） */
background-clip:border-box; /* 背景從邊框開始顯示 */
}
</style>
<body>
<div>內容從這里開始</div>
</body>
</html>
到此這篇關于HTML5 背景的顯示區域實現的文章就介紹到這了,更多相關HTML5 背景顯示區域內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
