Question

我目前有以下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完全按照它应该做的去做。我将背景设置为水平和垂直对齐到中心，然后我将它设置为它应该是的图像。我还将背景大小设置为自动100％ - 根据Mozilla Developer Network，它会调整图像的大小，就像我想要调整大小一样。

如果background-size有一个自动组件和一个非自动组件：如果图像具有固有比例，则使用指定尺寸渲染它，并从指定尺寸和固有比例计算其他尺寸。如果图像没有固有比例，请使用该维度的指定维度。对于其他维度，如果有图像，则使用图像的相应内在维度。如果没有这样的内在尺寸，请使用背景定位区域的相应尺寸。

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

起初，我觉得这可能是某种与浏览器相关的错误 - 但Chrome和Firefox中的页面看起来几乎完全一样！

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

Answer 1

将height: 100%;添加到html个样式。

Answer 2

请使用：

body { background-size: cover; }

这是一个CSS3属性，用背景图像覆盖页面。我忘记了它是否保持完美的宽高比，但它值得一拍，好友。

Answer 3

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')";">

CSS3 - （background-size：auto 100％;） - 意外行为

3 个答案: