Question

我目前正在为我正在开发的游戏制作一个非常简单的启动画面，并希望创建一个响应式背景图像（不熟悉个人的响应式内容）。

我大部分时间都在使用它（在Google Chrome和IE中），但问题是当我在Firefox中打开页面时，背景会被推高：

Pushed in Firefox

HTML：

<html>
<head>
    <link rel="stylesheet" href="css/style.css">
</head>

<body id="bg">

</body>

CSS：

html, body, aside {
    display: block;
    margin: 0;
    padding: 0;
}

#bg {
    background-image: url(../images/bg.png);
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-position:center;
}

有关如何解决此问题的任何提示，并确保该页面适用于所有浏览器，我们将不胜感激！

Answer 1

试试这个：

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

响应背景 - CSS

1 个答案:

在Firefox中测试过。工作正常。