css3的Background新属性_html/css_WEB-ITnose

前言

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

AI新媒体文章

专为新媒体人打造的AI写作工具，提供“选题创作”、“文章重写”、“爆款标题”等功能

75

查看详情

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:第一次翻译，勉强能看的懂吧。。。