首页 > 代码库 > 《图解CSS3——第4章 CSS3背景-2》
《图解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的内边缘)开始显示背景图片;
有一点需要提出,在IE8以下版本解析是不一样的,在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;}
2、border-box
.border-box{ background-origin: border-box;}
3、content-box
.content-box{ background-origin: content-box;}
4.2.3 浏览器兼容性
<style></style>
《图解CSS3——第4章 CSS3背景-2》
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。