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中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
浅谈HTML5 & CSS3的新交互特性
Jul 19 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 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的FTP学习(二)
2006/10/09 PHP
什么是MVC,好东西啊
2007/05/03 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
php两种无限分类方法实例
2015/04/21 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
Nginx实现反向代理
2017/09/20 Servers
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python搭建简易服务器分析与实现
2012/12/15 Python
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
学生会竞选自荐信
2013/10/12 职场文书
语文教育专业求职信
2014/06/28 职场文书
2015年药房工作总结
2015/04/25 职场文书
紫日观后感
2015/06/05 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
python tqdm用法及实例详解
2021/06/16 Python