css3的Background新属性

前言

CSS3中出现了几种关于背景图片的新属性:background-origin、background-clip、background-position等.之前大致了解了下,但是background-origin与background-clip的区别尚不清楚。就google了一篇,发现不错,翻译下来吧。
原文连接 : The New Background Position in CSS3
Say Hello to Background-Origin and Background-Clip, CSS3 new features!
ps: 原文在线代码演示已由codepen.io 搬至runjs.cn

background-position

用css给元素设置背景图片的每个人都用过background-position属性,在CSS3之前设置那个位置的值相对于元素的左上角(top,left),例如:

div {background-position: 20px 40px; /* 距左边20px & 距顶部40px */ }

有个问题就是不可能确定相对于其它点的精确位置,例如右下角(bottom, right), 只能以左上角开始。
我们可以写:background-position: right bottom;或者background-position: 70% /* from left */ 80%/* from top */,但不能写出距离右端20px和距离底端20px.
这里写图片描述

使用新的background-position

为了解决这个问题,CSS3提供了可以定义那个开始的位置和决定原点(0,0)的位置。
这里写图片描述

工作原理

相对于之前只能赋2个值的情况(相对于left和top的水平和垂直距离),现在用CSS3我们可以指定那个水平和垂直位置的原点,例如right bottom + 值。
background-position: right 20px bottom 40px
这里写图片描述
Live Example

同时你也能够给一个盒子设置多个背景图片且每个图片的原点不同。
这里写图片描述
Live Example

background-origin

在CSS2中,当我们给元素添加background-image时,图片是以元素padding的左上角开始。
默认的background-origin位置和设置background-position值为0 left, 0 top一致。我们能够看到background-image以padding开始的。
这里写图片描述
Live Example

通过background-origin我们能够设置背景图片开始的位置border、padding或content.
- border-box 相对于元素边界的左上角的(0, 0)
- padding-box(default) 相对于元素padding的左上角
- content-box 相对于元素content的左上角。
Live Example

background-clip

在background-origin例子中可以看到,background-origin的背景图片覆盖了元素的border/padding的right/bottom.
使用background-clip可以解决这个问题。使用background-clip我们可以决定裁剪背景图片的位置,值和background-origin的值相同,不过默认是border-box,不裁剪。
这里写图片描述
Live Example

从background-origin和background-clip的例子中可以看出,大多少情况下可能需要他们一起配合使用。而且使用这些属性可以编写出更nicer的东西,例如:
这里写图片描述
Live Example

ps:第一次翻译,勉强能看的懂吧。。。

posted @ 2015-08-14 11:30  qingguoing  阅读(242)  评论(0编辑  收藏  举报