1

我目前有以下 CSS（称为 splash.css）：

html { 
    background:url(splash.jpg) center no-repeat;
    background-size:auto 100%;
}

以及以下 HTML：

<!DOCTYPE html>
<HTML>
    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
        <TITLE>Test</TITLE>
        <link href="splash.css" rel="stylesheet" type="text/css" media="screen" />
    </HEAD>
    <BODY>
    </BODY>
</HTML>

我试图让名为 splash.jpg 的背景图像始终与浏览器窗口具有相同的高度，并调整它的大小（保持其纵横比）并允许一些宽度保留在浏览器窗口之外。此外，背景必须以浏览器窗口为中心。

目前我希望我的 CSS 能够完全按照它应该做的事情。我已将背景设置为与中心水平和垂直对齐，并将其设置为应有的图像。我还将 background-size 设置为 auto 100% - 根据Mozilla Developer Network的说法，它会调整图像的大小，就像我想要调整它的大小一样。

如果 background-size 有一个 auto 分量和一个 non-auto 分量：如果图像具有固有比例，则使用指定的维度进行渲染，并根据指定的维度和固有比例计算另一个维度。如果图像没有固有比例，请使用该尺寸的指定尺寸。对于另一个维度，如果有，则使用图像的相应固有维度。如果没有这样的固有维度，则使用背景定位区域的相应维度。

我面临的问题是，当我在浏览器窗口中打开 HTML 时，这个巨大的 1920x1080 图像的高度似乎只有 50 像素左右。宽度似乎也与高度的比例正确。

起初，我觉得这可能是某种依赖于浏览器的错误 - 但页面在 Chrome 和 Firefox 中看起来几乎完全相同！

注意 - 欢迎任何其他简单的解决方案。我不希望这种行为依赖于 Javascript - 但我不介意该解决方案仅适用于最新版本的 FF/Chrome。

4

3 回答 3

5

添加height: 100%;到您的html样式中。

于 2012-06-26T17:02:01.733 回答
3

只需使用这个：

body { background-size: cover; }

这是一个用背景图像覆盖页面的 CSS3 属性。我忘记了它是否保持完美的纵横比，但值得一试，伙计。

于 2012-06-26T17:06:39.663 回答
0 
background: url('/img/bg0.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";">
于 2013-11-27T01:58:57.443 回答