這篇文章主要介紹了HTML5 背景的顯示區(qū)域實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
background-clip 屬性規(guī)定背景的繪制區(qū)域。
默認值： border-box
繼承性： no
版本： CSS3
JavaScript 語法： object.style.backgroundClip=“content-box”
background-clip: border-box|padding-box|content-box;
border-box 背景被裁剪到邊框盒。 測試
padding-box 背景被裁剪到內(nèi)邊距框。 測試
content-box 背景被裁剪到內(nèi)容框。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>背景的顯示區(qū)域</title>
<style type="text/css">
div {
padding:50px; /* 設置內(nèi)邊距為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>內(nèi)容從這里開始</div>
</body>
</html>
到此這篇關于HTML5 背景的顯示區(qū)域實現(xiàn)的文章就介紹到這了,更多相關HTML5 背景顯示區(qū)域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
來源：腳本之家
鏈接：https://www.jb51.net/html5/734542.html
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
