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

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

我想到的方法是创建一个z索引为-1的绝对定位div，并调整顶部/高度以匹配固定布局

这是个好办法吗？还是有更好的办法

---

谢谢你的帮助！：D

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

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

很多网站“作弊”：网站的背景图片上已经有了这一条

---

这很简单，没有痛苦，但它是静态的。

更具语义的方法是将背景条应用于页面上的一个元素——在您的示例中是“slideshow”元素。该元素的外部约束（无论是

div

、

ul

还是其他约束）可以拉伸到页面宽度的100%，并且元素的内容可以居中（或根据需要定位）

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

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

让你的背景足够大，这样就不会有问题了

使用可平铺的背景

使用CSS3

背景大小

属性。（（注意：UNSEMANTIC！降低了可维护性等，但确实比CSS3

后台大小

..有更好的支持）

---

作为第1部分的补充）-还要确保图像的侧面尽可能与背景颜色无缝融合。请注意，在您链接到的页面上，bokeh图像的侧面有一个轻微的渐变，以使过渡到的颜色不那么刺眼。您还可以使用类似“title=”的backstretchjquery插件“>Backstretch作为不支持大小调整的浏览器的后备方法。@Ed-M很好！我喜欢jQuery的后备方案！关于背景图像到正常站点背景颜色之间的转换，Jess提供的示例也使用了边框。这可以在背景图像中使用，也可以使用CSS巧妙地创建。（尽量保持语义！）谢谢你的回答D听起来是一个非常好的方法。我一直在努力让它发挥作用，但我肯定我做错了什么。幻灯片元素和包含它的div是否必须与包含布局的主包装分开？@Jess为选项四添加了一个提琴。注意：这是最不可靠的选择！我建议使用选项三，然后使用Ed-M的jquery链接作为备用方法，这是一个更好的方法。@Jess添加了另一个选项，这次是更具语义的选项三。注意，linkedtofiddle不包含Ed-M链接到的jQuery回退脚本。