您当前的位置：首页 > 网站制作 > 前端设计

css3背景(五)—background-origin

时间：2020-08-23来源：杨青青个人博客作者：杨青青

background-origin

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

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

1）padding-box：从padding区域（含padding）开始显示背景图像。

2）border-box：从border区域（含border）开始显示背景图像。

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

用法：

在 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/p/2020/07-24/56514e9bd89568db3dceae9020d7badd.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>