作者：Chris Coyier

背景属性扮演了今天我们使用CSS创建出漂亮设计的主要角色。它由这么几个属性组成：background-color，background-image，background-position，background-repeat和background-attachment。非常简单，也非常有效。还有其它一些属性现在看来也逐渐可以使用了：background-opacity和background-anchor。

目前我们所有的

background-color:使用关键字，十六进制代码，rgb或者rgba设置纯色背景。

background-image:指定应用于背景的单张图片。

background-position:移动背景图片从顶部或底部，左边或右边，从中间或两边，或从左上角特定位置偏移。

background-repeat:如果一张图片被设置为背景，而且图片比元素的可视区域要小，这个属性设置可以让图片沿水平方向重复（repeat-x），垂直方向重复（repeat-y），同时两个方向重复（repeat）或者根部不重复（no-repeat）。

background-attachment:这个属性可以设置元素的背景附加于元素是常规的（可滚动的）或者是附加于网页之上（固定的）。

在CSS3中我们能够得到的

CSS3提供了多背景属性。换句话说，可以给一个元素应用多个背景图片，并且放置于不同的位置。真是简单而强大的属性。想象一个blockquote元素，你想分别给左上角应用一幅图片来表示开始引用，而在右下角应用一副图片来表示引用结束。通常你会需要一个额外的div元素来实现。但在CSS3中已不再需要：

background:
url(images/openquote.png) top left no-repeat,
url(images/closequote.png) bottom right no-repeat;

多背景在以Webkit为内核的浏览器中已经可以实现（Chrome & Safari），Firefix 3.6+和Opera 10.5+。

CSS3同时包含了background-origin和background-clip属性。这两个属性都涉及到盒模型和背景的关系。一般来说背景图片会覆盖内边距，但是不会覆盖边框。所以如果你有一个10像素宽的下边框和100像素宽的下内边距，背景图片会覆盖掉100像素宽的下内边距，但不会覆盖10像素宽的下边框。background-origin属性指定了确切的左上角应该是哪里（内容的左上角、边框的左上角还是内边距的左上角）。background-clip属性指定了背景图片应该在哪里停止（也是边框、内边距还是内容）。这两个属性的值为：padding-box，border-box，content-box。

我认为会很酷的一些东西

background-opacity: 0.0-1.0

这个设置将会改变背景的透明度（0代表完全透明，1代表完全不透明）。将会影响纯色的背景、图片或者两者都有的背景。我们已经可以使用RGBa来设置背景，已经可以给背景图片应用alpha透明，所以表面上看来，这个属性并非什么重要的属性。但是，能够使用CSS来设置背景的透明度会允许我们通过JavaScript来调节透明度或者一些新的CSS特效。例如，你只需要通过调整背景透明度来让表格标签上的红色感叹号逐渐变淡，而不需要使用额外的元素来实现。还有预载入。将背景图片设置为background-opacity:0;当载入网页的时候图片也被载入，然后再需要的时候瞬间显现出来。

background-anchor: anc-topleft | anc-topright | anc-bottomleft | anc-bottomright

这些属性将会和background-position属性配对使用。如果background-anchor属性设置为top right，而background-position设置为10px 10px，那么背景图片将会放置于从元素的右上角向下10个像素以及向左10个像素的位置。目前还没有方法能够实现这样的效果。你可以将背景图片设置为和上、下、左、右或者中间对其，但是除了左上角之外，你不可能将背景图片设置为和其他几个位置保持一定的距离。

如果background-position使用的是关键字，那么background-anchor将会被忽略。

注意这些值的奇怪的名字，比如”anc-bottomleft”。我觉得很奇怪是因为这些值并不像它们所看上去的那样表现。我不会选择使用”top left”，因为当使用background-position属性时，缩写的句法会使两个会发生冲突。

使用了background-anchor的背景图片会使一些事情变得更加容易。比如，将背景图片从元素的底部向上移动就不用先要计算高度了。

现在所全部拥有的

background:{
        white url(images/openquote.png) anc-topleft 10px 10px no-repeat 0.5,
        white url(images/closequote.png) anc-bottomright 10px 10px no-repeat 0.5;
}

上面的代码纯属假设，目前并不会有任何作用。

原文：Background Desires

分享到：