css中background-origin屬性的使用解析

2024-07-11 08:42:09

字體：大中小

來源：轉載

供稿：網(wǎng)友

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ū)域開始定位。

總結，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	背景圖像相對于內邊距框來定位。
border-box	背景圖像相對于邊框盒來定位。
content-box	背景圖像相對于內容框來定位。