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编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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 session 检测和注销
2009/03/16 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
php实现可运算的验证码
2015/11/10 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
浅析PHP开发规范
2018/02/05 PHP
javascript 三种编解码方式
2010/02/01 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
r.js来合并压缩css文件的示例
2018/04/26 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
Python设计模式之命令模式简单示例
2018/01/10 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
django实现日志按日期分割
2020/05/21 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
工程管理造价应届生求职信
2013/11/13 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
读书活动总结
2014/04/28 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript