css3背景(五)—background-origin

background-origin

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

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

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

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

3)content-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>

点赞

发表评论