CSS3中background-clip和background-origin的区别示例介绍


Posted in HTML / CSS onMarch 10, 2014

相信除了我以外,还有不少童鞋在学习到background-clip和background-origin的时候都很疑惑,这俩哥们儿到底啥区别。

想搞清楚它们的区别还不简单?且看下面的DEMO:

复制代码
代码如下:

.test {
background-image: url(pic.jpg);
background-clip: border-box;
background-origin: border-box;
border: 20px dashed black;
}
复制代码
代码如下:

.test {
background-image: url(pic.jpg);
background-clip: border-box;
background-origin: padding-box;
border: 20px dashed black;
}
复制代码
代码如下:

.test {
background-image: url(pic.jpg);
background-clip: padding-box;
background-origin: border-box;
border: 20px dashed black;
}

由于鄙人比较懒,就不放效果图了,有兴趣的童鞋可以自己去试试,这里可以看出,实际上background-clip决定的是背景从哪个区域开始显示,而background-origin决定的是背景从哪个区域开始绘制。
HTML / CSS 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 #HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 #HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 #HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 #HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 #HTML / CSS
css3隔行变换色实现示例
Feb 19 #HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 #HTML / CSS
You might like
浅谈php优化需要注意的地方
2014/11/27 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python实现的快速排序算法详解
2017/08/01 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
django从后台返回html代码的实例
2020/03/11 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
丑小鸭教学反思
2014/02/03 职场文书
二手房购房意向书范本
2014/04/01 职场文书
行政管理专业求职信
2014/07/06 职场文书
股东授权委托书范本
2014/09/13 职场文书
农业生产宣传标语
2014/10/08 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
英语辞职信怎么写
2015/02/28 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
vue ref如何获取子组件属性值
2022/03/31 Vue.js