css中background-origin屬性的使用解析
我要評論background-origin用來規(guī)定元素背景圖像的相對定位位置，它有三個屬性值：
1、border-box
border-box表示元素背景圖像相對于border區(qū)域開始定位。
代碼如下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;<br data-filtered="filtered">font-size:100px;font-weight:bold;background-origin:border-box;]
</style>
</head>
<body>
<div class="box "></div>
</body>
</html>
效果如下：
從上圖可以看出,元素的背景圖像從邊框區(qū)域開始定位。
2、padding-box
padding-box表示元素背景圖像相對于padding區(qū)域開始定位。
代碼如下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;<br data-filtered="filtered">font-size:100px;font-weight:bold;background-origin:padding-box;]
</style>
</head>
<body>
<div class="box "></div>
</body>
</html>
效果如下：
從上圖可以看出：元素背景圖像從padding區(qū)域開始定位。
3、content-box
content-box表示元素背景圖像相對于content區(qū)域開始定位。
代碼如下：
<!doctype html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.box{width:430px;height:280px;margin:100px auto;background:url("fengjing.jpg") no-repeat;padding:5px;border:5px dotted #000;<br data-filtered="filtered">font-size:100px;font-weight:bold;background-origin:content-box;]
</style>
</head>
<body>
<div class="box "></div>
</body>
</html>
效果如下：
從上圖可以看出：元素的背景圖像初始位置從content區(qū)域開始定位。
總結(jié)，background-origin屬性定義了背景圖像的相對定位位置，這個位置可以用background-position來改變，而且元素背景圖像的區(qū)域不會因此被限定住，只對元素背景圖像起作用。如果元素使用background-attachment屬性時，該屬性會失效。
background-origin定義和用法
background-origin 屬性規(guī)定 background-position 屬性相對于什么位置來定位。
注釋：如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒有效果。
| 默認值： | padding-box |
|---|---|
| 繼承性： | no |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.backgroundOrigin="content-box" |
語法
background-origin: padding-box|border-box|content-box;
| 值 | 描述 | |
|---|---|---|
| padding-box | 背景圖像相對于內(nèi)邊距框來定位。 | |
| border-box | 背景圖像相對于邊框盒來定位。 | |
| content-box | 背景圖像相對于內(nèi)容框來定位。 |
總結(jié)
以上所述是小編給大家介紹的css中background-origin屬性的使用解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
CSS3中background-clip和background-origin的區(qū)別示例介紹
本文為大家介紹下CSS3中background-clip和background-origin的區(qū)別，感興趣的朋友可以參考下2014-03-10在css3中background-clip屬性與background-origin屬性的用法介紹
困惑在哪里？ background-clip 與 background-origin是css3中引入的兩個跟元素背景相關(guān)的屬性，它們有相同的可選值，即border、padding、content三種，而且這兩個屬性表示2012-11-13深入淺出CSS3 background-clip,background-origin和border-image教程
最近在準備一個下學期參加比賽的概念網(wǎng)站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但僅僅是依靠w3schools上的文檔2011-01-27CSS3教程：background-clip和background-origin-CSS教程-網(wǎng)頁制作-網(wǎng)頁
原文：http://www.planabc.net/2008/04/14/background-clip_background-origin/ background-clip 和 background-origin 是 CSS3 中新加的 background module 屬性，用來2008-10-17