我目前正在为我正在开发的游戏制作一个非常简单的启动画面，并且只想创建一个响应式背景图像(我个人不熟悉响应式的东西)。
我大部分时间(在 Google Chrome 和 IE 中)都能正常工作，但问题是当我在 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;
}
任何有关如何解决此问题并确保该页面在所有浏览器中正常工作的提示都将不胜感激!
最佳答案
试试这个:
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;
}
在 Firefox 中测试。工作正常。
关于html - 响应式背景 - CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25593352/