《图解CSS3——第4章 CSS3背景-2》

4.2 CSS3 背景原点属性

4.2.1 background-origin 属性的语法及参数

background-origin属性主要就是用来决定 background-position属性的参考原点，即决定背景图片定位的起点。在默认情况下，背景图片的background-position属性总是以元素左上角的坐标原点对背景图片进行背景定位。CSS3的background-origin属性将打破这一格局，可以根据自己的需要来改变背景图片的background-position起始位置。

语法：

background-origin: padding || border || content //早期语法
background-origin: padding-box || border-box || content-box //新语法

IE9+ / firefox4+ / chrome4+ / safari3+ / opera10.5+ 均支持新的语法

取值说明：

1、padding-box(padding):此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片；

2、border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片；

3、content-box(content):此值决定background-position起始位置从content的外边缘（padding的内边缘）开始显示背景图片；

有一点需要提出，在ＩＥ8以下版本解析是不一样的，在IE7以下版本background-origin默认是从border开始显示背景图片。

4.2.2 background-origin属性使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-origin 使用方法</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            border: 20px dashed rgba(0, 0, 0, 0.3);
            background: orange url(http://7xr9pe.com1.z0.glb.clouddn.com/logo100.jpg) no-repeat left top;
            padding: 20px;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="padding-box"></div>
</body>
</html>

1、padding-box

.padding-box{
    background-origin: padding-box;
}

padding-box 效果

2、border-box

.border-box{
    background-origin: border-box;
}

border-box 效果

3、content-box

.content-box{
    background-origin: content-box;
}

content-box 效果

4.2.3 浏览器兼容性

background-origin 浏览器兼容性

 

posted @ 2016-12-15 23:02  白小虫  阅读(284)  评论(0)  编辑  收藏  举报