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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 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
提取HTML标签
2006/10/09 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
session 加入redis的实现代码
2016/07/15 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
PHP7多线程搭建教程
2017/04/21 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
python之yield表达式学习
2014/09/02 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python字符串及文本模式方法详解
2020/09/10 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
EJB发布WEB服务一般步骤
2012/10/31 面试题
银行委托书范本
2014/04/04 职场文书
法人授权委托书范本
2014/09/17 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
小学语文教师研修日志
2015/11/13 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
同学聚会开幕词
2019/04/02 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
在Docker容器中部署SQL Server
2022/04/11 Servers