亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時(shí)間：2018-04-09 15:07:43   作者：佚名   我要評(píng)論
這篇文章主要介紹了css中background-origin屬性的使用解析，background-origin用來規(guī)定元素背景圖像的相對(duì)定位位置，文中給大家介紹了background-origin的三個(gè)屬性值，感興趣的朋友一起看看吧

background-origin用來規(guī)定元素背景圖像的相對(duì)定位位置，它有三個(gè)屬性值：

1、border-box

border-box表示元素背景圖像相對(duì)于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表示元素背景圖像相對(duì)于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表示元素背景圖像相對(duì)于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屬性定義了背景圖像的相對(duì)定位位置，這個(gè)位置可以用background-position來改變，而且元素背景圖像的區(qū)域不會(huì)因此被限定住，只對(duì)元素背景圖像起作用。如果元素使用background-attachment屬性時(shí)，該屬性會(huì)失效。

background-origin定義和用法

background-origin 屬性規(guī)定 background-position 屬性相對(duì)于什么位置來定位。
 

注釋：如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒有效果。

默認(rèn)值： padding-box
繼承性： no
版本： CSS3
JavaScript 語法： object.style.backgroundOrigin="content-box"

語法
 

background-origin: padding-box|border-box|content-box;

值 描述  
padding-box 背景圖像相對(duì)于內(nèi)邊距框來定位。  
border-box 背景圖像相對(duì)于邊框盒來定位。  
content-box 背景圖像相對(duì)于內(nèi)容框來定位。

總結(jié)

以上所述是小編給大家介紹的css中background-origin屬性的使用解析，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論