css3中background-clip和background-origin的区别
来源:互联网 发布:软件投标书模板 编辑:程序博客网 时间:2024/04/18 22:04
在css3中,background-clip和background-origin实现的效果有时候是很相似的,所以有时候会很容易就把这两个属性弄混。
background-clip是从盒子的内边框开始显示图片,然后根据你设置的属性来决定裁剪的范围,并不会影响图片开始显示的位置;
而background-origin不会影响图片的显示范围,它只是单纯控制图片开始显示的那个位置,即图片左上角坐标的点。
下面用一段简单的代码来测试一下,首先测试background-clip
<pre name="code" class="html"><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div{float: left;border: 10px dashed red;width: 100px;height: 100px;margin: 20px 20px;padding: 50px;background: gray url(img/bg.png) no-repeat;}p{font-size: 20px;color: #fff;}.border{background-clip: border-box;}.padding{background-clip: padding-box;}.content{background-clip: content-box;}</style></head><body><div class="border"><p>border</p></div><div class="padding"><p>padding</p></div><div class="content"><p>content</p></div></body></html>
可以看到,图片上的白点的位置是没有发生改变的,只是在背景上的范围被裁剪了而已,所以background-clip属性影响的图片在背景上显示的范围大小而不会影响它处在背景上的位置。那么接下来看background-origin属性
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div{float: left;border: 10px dashed red;width: 100px;height: 100px;margin: 20px 20px;padding: 50px;background: gray url(img/bg.png) no-repeat;}p{font-size: 20px;color: #fff;}.border{background-origin: border-box;}.padding{background-origin: padding-box;}.content{background-origin: content-box;}</style></head><body><div class="border"><p>border</p></div><div class="padding"><p>padding</p></div><div class="content"><p>content</p></div></body></html>
大家看图片中白点的位置已经发生了变化,因为此时背景图片显示的起始位置已经发生了变化,左上方没有显示图片并不是因为被裁剪,而是因为起点位置在更下面的地方,所以那里没有显示图片而已。
0 0
- CSS3中background-clip和background-origin的区别
- css3中background-clip和background-origin的区别
- background-clip和background-origin的区别
- CSS3教程:background-clip和background-origin
- css3 background-clip和background-origin
- CSS3 background-origin,background-clip的比较
- css3属性中background-clip与background-origin的用法区别?
- css3之background-origin和background-clip的区别与联系
- background-clip和background-origin区别
- background-clip 与 background-origin 的区别
- 【CSS3】---background-origin background-clip background-size
- 深入浅出CSS3:background-clip,background-origin和border-image教程
- 深入浅出CSS3:background-clip,background-origin和border-image教程
- 深入浅出CSS3:background-clip,background-origin和border-image教程
- 深入浅出CSS3:background-clip,background-origin和border-image教程
- 深入浅出CSS3 background-clip,background-origin和border-image教程
- css3属性中background-clip与background-origin的用法释疑
- css3属性中background-clip与background-origin的用法释疑
- 无辅助存储空间判断回文数字
- js的12个鸡肋 ---来自《javascript语言精粹》
- BMX055驱动日记
- CSS 选择器参考手册
- JDK源码解析(1)——数据数组排序:Arrays.sort()
- css3中background-clip和background-origin的区别
- 使用三极管时的注意事项
- 由货币的属性推想到,怎样的货币是凌驾于科技之上的最大限度地安全货币
- 流水线调度dp问题
- 关于mysql hibernate视图
- java学习2
- Android Fragment应用实战,使用碎片向ActivityGroup说再见
- Java提高篇(一):subList的缺陷
- 【Java基础】——集合