css3中background-clip和background-origin的区别
2016-08-31 19:25
609 查看
在css3中,background-clip和background-origin实现的效果有时候是很相似的,所以有时候会很容易就把这两个属性弄混。
background-clip是从盒子的内边框开始显示图片,然后根据你设置的属性来决定裁剪的范围,并不会影响图片开始显示的位置;
而background-origin不会影响图片的显示范围,它只是单纯控制图片开始显示的那个位置,即图片左上角坐标的点。
下面用一段简单的代码来测试一下,首先测试background-clip
可以看到,图片上的白点的位置是没有发生改变的,只是在背景上的范围被裁剪了而已,所以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>
大家看图片中白点的位置已经发生了变化,因为此时背景图片显示的起始位置已经发生了变化,左上方没有显示图片并不是因为被裁剪,而是因为起点位置在更下面的地方,所以那里没有显示图片而已。
相关文章推荐
- 【CSS3】background-origin和background-clip的区别
- css3属性中background-clip与background-origin的用法区别?
- CSS3中background-clip和background-origin的区别示例介绍
- css3之background-origin和background-clip的区别与联系
- CSS3中background-origin和background-clip的区别
- css3中background-clip和background-origin的区别
- CSS3中background-clip和background-origin的区别
- css3,background-clip/background-origin的使用场景,通俗讲解
- css3属性中background-clip与background-origin的用法释疑
- css3,background-clip/background-origin的使用场景,通俗讲解
- 深入浅出CSS3 background-clip,background-origin和border-image教程
- background-origin和background-clip的区别
- background-clip与background-origin两者的区别
- css3新增背景属性background-clip/background-origin/background-size
- css3属性中background-clip与background-origin的用法释疑
- css3中的background的新特性background-origin,background-clip,background-size详解
- css3属性中background-clip与background-origin的用法释疑
- css3属性中background-clip与background-origin的用法释疑
- 深入浅出CSS3:background-clip,background-origin和border-image教程
- CSS3教程:background-clip和background-origin