使用CSS制作功能条背景的最佳方法？

Question

我想知道在网站布局中创建背景功能条的最佳方法是什么？

我想到的方法是创建一个z-index为-1的绝对定位div，并调整top / height以匹配固定布局。

这是一个很好的方法吗？或者有更好的方法吗？

感谢您的帮助！ ：d

Answer 1

包含放置在内容后面的图像的div可能是制作缩放背景的最佳方式。

我认为CSS3也支持background scaling，但它并没有得到广泛支持。

Answer 2

网站数量“作弊”：该网站的背景图片上已有条带

它简单而无痛，但它是静止的。

Answer 3

更加语义的方法是将背景条应用于页面上的元素 - 例如，“幻灯片”元素。然后，此元素的外部约束（无论是div，ul还是其他内容）可以拉伸到页面宽度的100％，并且元素的内容居中（或定位）根据需要）。

这种方法比其他方法更易于维护 - 可以在元素之前添加内容而不会破坏布局，可以不费力地更改条带等。

可以通过多种方式处理背景缩放：

1. 让你的背景足够大，不会出现问题。
2. 使用可拼图的背景。
3. 使用CSS3 background-size属性。 A jsfiddle example is here.（Not supported in <=IE8，但有点创造力可能会优雅地降低。）
4. 将图像放入div（或类似）中，然后使用CSS绝对定位，将z-index设置为强制在内容下方，并将图像拉伸到元素的宽度和高度。 Here's a jsfiddle example.（注意：UNSEMANTIC！降低可维护性等。但确实有比CSS3更好的支持background-size ...）