thebackground属性是使当今令人惊叹的 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：这将设置元素的背景是否应像正常一样附加到元素 (scroll) 或附加到页面本身 (fixed)。
我们在 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）、Firefox 3.6+ 和 Opera 10.5+ 中支持多个背景。
CSS3 还引入了background-origin以及background-clip。这两个属性都处理盒模型如何与背景相关联。通常，背景图像将覆盖填充，但不覆盖边框。因此，如果您有 10px 底部边框和 100px 底部填充，则背景将在 100px 填充中，但不会在 10px 边框中。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 级别来淡入表单标签上的红色感叹号图形，而无需使用其他元素来执行此操作。还可以考虑预加载。将背景图形设置为background-opacity: 0;仍将在页面加载时加载图像，并在需要时立即显示。
background-anchor: anc-topleft | anc-topright | anc-bottomleft | anc-bottomright
这将是一个与background-positon属性配对的属性。如果background-anchor设置为右上角，并且background-position设置为 10px 10px，则background-image将定位在元素右上角向下 10px 和向内 10px 的位置。目前无法做到这一点。您可以将背景图像与顶部/底部左侧/右侧或任一侧的中心对齐，但无法与除左上角以外的任何位置设置一定的距离。
如果background-position要使用关键字，background-anchor将被忽略。
请注意值的奇怪名称，例如“anc-bottomleft”。我知道这很奇怪，并且可能不是执行此操作的方式。我没有使用标准选择（如“左上角”），因为这将与在使用 background 的简写语法时与background-position一起使用的相同关键字冲突。
锚定背景图像将使某些操作更容易，例如，在不先进行高度计算的情况下，从元素底部向上滑动背景图像。
现在全部放在一起
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;以上代码纯属假设，并且按原样**无法工作**。
在 CSS3 中，您错过了 background-size、background-attachment、background-clip、background-origin，
所有这些以及多个背景图像都在 Opera 10.50 (pre) alpha 中有效。
实际上，
background-attachment是 CSS1，Chris 在“我们现在拥有的功能”部分已正确提及了它。嗨，Chris，
我真的很喜欢 background-opacity 的想法！这将是一个非常方便的功能。也许您应该向 W3C 建议它 :)
顺便说一句。Firefox 3.6 RC1 现在也支持多个背景。
此致
Christoph
目前有五个主要的浏览器布局引擎
Internet Explorer 8 使用 Trident，Mozilla 基金会使用 Gecko，KDE 项目开发 KHTML，Apple Inc 开发 KHTML 的开源分支 WebKit，以及 Opera Software 开发的 Presto。
当然，随着这些引擎的成熟，我认为应该更多地强调配置和模块化。
例如，一个实时解释的 XUL 模块，它声明用户定义的布局特性，如 background-opacity 和 background-anchor。
不确定在当前事件的情况下安全隐患如何，但某些内容可以减少对设计人员和开发人员的限制。
是的，我喜欢 background opacity 的想法。事实上，这是一个非常棒的想法，以至于我很惊讶它还没有付诸实践。
使用 jQuery 淡入淡出的想法将使网站在付出最少努力的情况下看起来更酷。
我也需要对背景进行此刷新，这让我开始考虑 background-attachment 以及您没有介绍的关于在浏览器更改时更改的全尺寸背景的教程。
淡入动画听起来很酷，就像一种更优雅的页面加载方式，现在唯一可以做到这一点的方法是使用交错的 PNG 图像，但 PNG 比 JPG 更重，因此也不是最佳解决方案。
我绝对赞成 background-position 的锚点，为什么背景不应该存在这些锚点，而普通元素却存在呢？
Opera 10.50 也支持多个背景。
实际上。如果您查看 CSS3 的新背景属性，您会发现 background-position 应该有 4 个变量。因此，在您的锚点示例中，您将改为执行以下操作：background-position: top 10px right 10px。这将将其移动到顶部，然后偏移 10px，然后移动到右侧并偏移 10px。
我之前对此进行了一些研究，并在我的博客上写了关于它的一些内容。
我也非常喜欢 background opacity 的想法。那将是甜蜜的。
这太棒了！我迫不及待地期待着 CSS3 最终完全到来。
我真的很喜欢这篇文章，并且 background-opacity 绝对会成为 CSS3 的一个很棒的补充。
背景锚点会非常棒，我厌倦了将背景图像的 left 位置设置为 99%。
更细粒度的定位会很好。
background-opacity 听起来是个好主意！我正在做一个项目，这正是我需要的。
演示？
只是一个建议……您可能希望在示例代码旁边添加一个小免责声明，说明此代码纯粹是假设性的，在任何浏览器中都无法使用……很多人可能不会阅读文章，并会尝试实现代码……然后他们可能会开始给您写信说明为什么它不起作用。
哈哈，确实如此。
嘿，Chris……我喜欢你关于背景锚点的建议。我读了一分钟，等等，背景位置难道不是已经可以做到吗？然后我意识到锚点将是开始的基线。这将非常有用。
使用精灵图时，有多少次需要去 Photoshop 中绘制一条从左侧或图像开始指向左侧的参考线来获取标尺单位位置。如果能这样说，那该有多好。
将所有导航定位在您 400 像素宽的精灵图的左侧 200 像素内，然后将所有结构元素定位在右侧。
然后您可以为所有导航设置一个锚点或左上角，为所有结构 div 设置右上角。
就像每次一样，干得好，你对市场有着敏锐的眼光。
确实应该添加背景不透明度……我讨厌设置元素的不透明度，然后又记得这会影响元素的所有子元素。RGBA 有帮助，并且为 webkit/firefox 添加 CSS3 动画确实意味着您可以对其进行动画处理。
非常好，同意背景不透明度的想法。谢谢 Chris。
同意……背景不透明度将非常有用，并为我们设计师提供许多无需编写太多代码即可进行创意设计的新方法。
你应该向 W3C 推荐它，我肯定会投票给你。
但我对锚点想法不太信服。我当然可以理解你的观点，但就像 Pål Strøm 提交的评论一样，你难道不会认为顶部、底部、左侧、右侧就是你的锚点，并且你会将你的 background-position 输入为：top 10px right 10px 吗？这比拥有一个全新的属性更容易且更好。
好吧，这违背了添加锚点的目的。添加锚点是为了让你能够更容易地以增量方式工作。
假设你在一个高度和宽度均为 400 像素的精灵图的右侧有结构元素。我不知道图标或更大的阴影可以放置在这里。
如果你将左上角定义为锚点，你总是从 0 开始然后向外定位。这很好，但当你需要处理未知的宽度和高度时，就会出现问题。你总是必须回到标尺工具。
但是，假设你在右侧有导航。在这种情况下，你知道你的导航栏宽度都为 200 像素，高度为 50 像素。
在这里，您可以将右上角定义为锚点，并仅在以下内容中说明背景位置。
链接：0 0
悬停：0 50
活动：0 100
等等。接下来假设您有一个子导航，高度为 30 像素，宽度也为 200 像素。
你已经使用了 150 像素的高度。假设精灵图的最大高度为 400 像素。那么最好将子导航对齐到底部。在 P Shop 或其他软件中创建精灵图时，这只需花费一秒钟。
背景锚点：右下角
子导航链接
链接：0 0;
已访问：0 30;
活动：0 60;
此示例并不理想，特别是如果您知道结构侧面的最大宽度为 200 像素，您可以简单地使用背景位置并使用 200 像素作为起点。因此，所有导航元素都将类似于
-200px 0;
使用锚点右侧没有负值吗？
我认为 background-opacity 是一个好主意。
我想要的另一件事是在背景位置中指定开始和“结束”，以便将 css 精灵图 100% 用于背景。
我真的很喜欢“anc-…”的想法。这是我很久以来一直缺少的东西。另一件非常棒的事情是，如果可以对重复的背景图像进行背景定位，并且此外，还可以为其提供四个值（顶部、右侧、底部、左侧），例如：
background: url(someImage.jpg) 10px 0 10px 5px repeat-y;通过这种方式，可以为背景图像提供所有四边的“边距”，而不仅仅是两个（并使其也适用于重复的背景）。我的背景愿望并不超出梦想有一天 CSS3 能够（几乎）普遍支持：）。在一个元素上使用多个背景会让我的 XHTML 更简洁。
Opera 的开发者关系团队正在运行一些很酷的 CSS3 演示：）
http://dev.opera.com/articles/view/css3-border-background-boxshadow/
看起来像一个非常合理的想法，Chris。
我可以指出，对于 css3，你应该先输出结束引号，然后再输出第一个和最后一个，这样你总是会有开始引号吗？
我投票支持背景不透明度。这比使用 gif 选项或拼命尝试将某些元素对齐到固定位置以获得所需的透明效果要干净得多。
我可以想到很多可以用它做的事情！
动态背景怎么样？
在 CSS3 中拥有某种可调整大小的背景图像属性会很好。是否这是一个好主意取决于你如何看待 JavaScript 的用途。
背景不透明度在我的愿望清单上并不靠前，但锚点想法很棒——希望看到类似的东西被引入！
当前的 CSS3 功能对我来说已经非常庞大了：)但我认为 background-anchor 属性可能非常有用
如果我们也能缩放和旋转背景图像，那就太好了
内置一些运动或视差怎么样？？？
background-opacity 真的很酷。