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 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 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
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
ant design实现圈选功能
2019/12/17 Javascript
基于Pandas读取csv文件Error的总结
2018/06/15 Python
Tesserocr库的正确安装方式
2018/10/19 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
python 实现"神经衰弱"翻牌游戏
2020/11/09 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
雷蛇美国官网:Razer
2020/04/03 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
合作投资意向书
2014/04/01 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
转正申请报告格式
2015/05/15 职场文书
小学班主任研修日志
2015/11/13 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
利用Apache Common将java对象池化的问题
2022/06/16 Servers