在浏览器中跨越图像，就像在 facebook 横幅中一样，但现在是图像答案

【问题标题】：Spanning an image acrosss the browser like in facebook banner but now an image在浏览器中跨越图像，就像在 facebook 横幅中一样，但现在是图像
【发布时间】：2011-02-04 15:24:26
【问题描述】：

我想知道如何通过浏览器制作图像，即使我的网站在更大的显示器中查看，图像仍会展开并延伸，而不会在末尾显示空白。

【问题讨论】：

标签： css html photoshop-cs4

【解决方案1】：

你基本上有两种选择：

使用填充整个宽度的重复模式：您可以使用

width: 100%; background: url(your-image-file) repeat-x
使用固定的主图像和填充剩余区域的背景填充图像：背景将使用与上述相同的代码，主图像可以是背景容器中的img。

【讨论】：

【解决方案2】：

首先，让我们用这段代码清除你的空白。

* {            
    margin: 0;
    padding: 0;
}

通过在您的样式表或部分中使用它，它将允许这些图像一直延伸而没有空白。

接下来，您需要创建一个看起来不歪斜的图像。为此，您首先需要以相当宽的格式创建它。如果您希望填充整个背景，我建议将1028X768 px 设置为合适的尺寸。

最后，是时候放置最后一点代码并让它全部运行了。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这将适用于所有当前浏览器附近的 dang（IE8 及以下版本除外）。

为了放置一个您想要跨越但不完全覆盖的奇数大小的图像，我建议使用<div> 为图像创建一个位置并向<div> 添加一个样式，上面写着width: 100%; .

这也可以用高度来完成。

希望这会有所帮助。

【讨论】：