Question

我需要一些帮助才能在移动设备上显示我的背景，当前代码可以在我的浏览器上运行但是当我在移动设备上访问它时，背景爬到顶部并且不可见，也是另一个图像的div对我给出的％没有反应。（我真的必须使用百分比因为它会使网站更好地适用于任何移动设备）

我有这个代码工作，但它不是在CSS中，而是用HTML本身制作，现在我想使用CSS，因为你不能再下载背景作为图片了。

<!DOCTYPE html>
<html>
<head>
<link rel="favicon" type="image/ico" href="favicon.ico"/>
<title>Rolling Barrel :: Sport & Game</title>
<meta name="description" content="De Rolling Barrel is een revolutionair idee waarmee sporten & gamen een compleet nieuwe dimensie krijgt.">
<style>
body#background {
	background: url('background.jpg') no-repeat center center fixed;
	background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-color: #e0e0e0;
	background-size: 100% 100%;
}

div {
	position: absolute;
	top: 20%;
	left: 11%;
	width: 37%;
	height: 70%;
	overflow-y: scroll;
	overflow-x: hidden;
}

div img {
	width: 100%;
}
</style>
</head>
<body id="background">
<div>
    <img src="text.png" alt=""/>
</div>
</body>
</html>

我用我的Android手机查看网站顺便说一句。希望有人可以帮助我，或者让我朝着正确的方向努力。

非常感谢!!

Answer 1

要么将background-image属性放在#background上，要么只是将它放在body（在css中），不需要两者。我知道您可能想要包含图像，在这种情况下，您可以使用元素名称（#background）并在图像出血时将溢出设置为无。

如果您有任何疑问或需要帮助，请发表评论，我会为您设置一个JS小提琴。

CSS背景图片没有在移动设备上显示

1 个答案: