2013-08-01css3背景(五)—background-origin

    您现在的位置是:首页 > 学无止境 > CSS3|Html5

    background-origin

    说明:background-origin 属性规定背景图片的定位区域。

    背景图片可以放置于 content-box、padding-box 或 border-box 区域。

    1padding-box:从padding区域(含padding)开始显示背景图像。

    2border-box:从border区域(含border)开始显示背景图像。

    3content-box:从content区域开始显示背景图像。

    background-origin.gif

    用法:

    在 content-box 中定位背景图片:

    div

    {

    background:url(bg.gif);

    background-repeat:no-repeat;

    -webkit-background-origin:border-box; /* Safari and Chrome 其他浏览器前缀请自己加上 */

    background-origin:border-box;

    }

    兼容性:IE9以下的版本不支持该属性

    示例:

    background-origin:border-box

    background-origin:padding-box

    background-origin:content-box

    代码片段:

    <!doctype html>

    <html>

    <head>

    <meta charset="gb2312">

    <title>CSS3—background-origin</title>

    <style type="text/css">

    .list{ width:400px;height:80px;border:10px dashed #999 ;

    background:url(/d/file/newshtml5/css/2013-08-01/ecf1d9bccb9e2e691074540c53446911.jpg);

    background-repeat:no-repeat;

    background-origin:content-box;

    -webkit-background-origin:border-box; /* Safari and Chrome 其他浏览器前缀请自己加上 */

    }

    </style>

    </head>

    <body>

    <p class="list">background-origin:content-box</p>

    </body></html>

关键字词:css3,css3背景,background-origin