CSS3教程:background-clip和background-origin


Posted in HTML / CSS onOctober 17, 2008

原文:http://www.planabc.net/2008/04/14/background-clip_background-origin/
background-clip 和 background-origin 是 CSS3 中新加的 background module 属性,用来确定背景的定位。
background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。
语法为: background-clip: [border | padding] [, [border | padding]]* background-origin: [border | padding | content] [, [border | padding | content]]*
CSS3教程:background-clip和background-origin
对于 background-clip
如果是 padding 值,则 background 忽略 padding边缘,border 是透明的。如果是 border 值,则background 包括 border 区域。如果 background-image 图片有多个,对应的 background-clip 值之间用逗号分隔。
对于 background-origin
如果是 padding 值,则 position 相对于 padding 边缘("0 0" 为 padding 边缘的左上角,而 "100% 100%" 为右下角)。如果是 border 值,则意味着相对 border 边缘。而 border 值则相对于内容边缘。与 background-clip 相同,多个值也用逗号分隔。如果 background-clip 是 padding 值,background-origin 是 border 值,并且 background-position 是 "top left"(默认初始值),则背景图左上角将会被截取掉部分。
这两个属性仅从 CSS3 才出现,在未使用该属性 background module 中的默认表现又如何呢?
background-clip 默认类似于 background-clip:border。
background-origin 默认类似于 background-origin:padding。
但 IE 又是特例 (It sucks)。
在 IE6 、IE7 中,一般元素(button 等除外)的背景相当于:background-clip:border; background-origin:border;
而 hasLayout 的元素(加上 button 等)的背景则相当于:background-clip:padding; background-origin:padding;
这一对 CSS3 属性已在 Mozilla, Safari 3 和 Konqueror 等浏览器中实现,不过都是通过其私有属性的表达方式。
引用:
基本非 IE 的浏览器的私有属性一般都会以 -xxx- 这样开始,-o-就是以 Presto 为引擎的 Opera 私有的、-icab- 是 iCab 私有的,-khtml- 是以 KHTML 为引擎的浏览器(如 Konqueror Safari)、-moz- 就是以 Mozilla 的 Gecko 为引擎的浏览器(如Firefox,Mozilla)、-webkit- 就是以 Webkit 渲染引擎(是 KHTML 的衍生产品)的浏览器(如 Safari、Swift)。
即支持的私有属性分别为: moz-background-clip webkit-background-clip khtml-background-clip moz-background-origin webkit-background-origin khtml-background-origin

上一页12 下一页 阅读全文
HTML / CSS 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
细说CSS3中的选择符
Oct 17 #HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 #HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 #HTML / CSS
css3 中实现炫酷的loading效果
Apr 26 #HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 #HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 #HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 #HTML / CSS
You might like
php数组中删除元素的实现代码
2012/06/22 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
PHP 实现重载
2021/03/09 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
解析Python编程中的包结构
2015/10/25 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
python 使用shutil复制图片的例子
2019/12/13 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Django缓存Cache使用详解
2020/11/30 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
汽车专业人才自我鉴定范文
2013/12/29 职场文书
材料会计岗位职责
2014/03/06 职场文书
优秀广告词大全
2014/03/19 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
超市采购员岗位职责
2015/04/07 职场文书
居安思危观后感
2015/06/11 职场文书
python基础详解之if循环语句
2021/04/24 Python
详解非极大值抑制算法之Python实现
2021/06/28 Python