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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 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中iconv函数使用方法
2008/05/24 PHP
php模板原理讲解
2013/11/13 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
如何在PHP中生成随机数
2020/06/04 PHP
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
Vue表单输入绑定的示例代码
2018/11/01 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Python正则表达式介绍
2012/08/06 Python
python打开网页和暂停实例
2014/09/30 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python框架中flask知识点总结
2018/08/17 Python
python实现图片识别汽车功能
2018/11/30 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
如何用Python 加密文件
2020/09/10 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
C#面试常见问题
2013/02/25 面试题
国际经济贸易专业推荐信
2013/11/06 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers