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 相关文章推荐
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
HTML中link标签属性的具体用法
May 07 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php发送post请求函数分享
2014/03/06 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
在Django的模型中添加自定义方法的示例
2015/07/21 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
pandas中去除指定字符的实例
2018/05/18 Python
详解Python sys.argv使用方法
2019/05/10 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
python 如何区分return和yield
2020/09/22 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
工程造价与管理专业应届生求职信
2013/11/23 职场文书
实习单位接收函
2014/01/11 职场文书
投资合作意向书范本
2015/05/08 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python