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 相关文章推荐
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
POST提交数据常见的四种方式
Jan 18 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php自动加载方式集合
2016/04/04 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Python守护线程用法实例
2017/06/23 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
python语言中有算法吗
2020/06/16 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
Python的两道面试题
2013/06/29 面试题
零件设计自荐信范文
2013/11/27 职场文书
预备党员转正考核材料
2014/06/03 职场文书
主要负责人任命书
2014/06/06 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis