您现在的位置是:首页 > 博客网站制作 > CSS3|Html5CSS3|Html5

css3背景(五)—background-origin

杨青青2013-08-01【CSS3|Html5】人已围观

简介background-origin说明:background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。1)padding-box:从padding区域(含padding)开始显示背景图像。

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>

很赞哦! ()

文章评论

站点信息

打赏本站

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~