Question

我有一个简单的html文档。

正文中的div，包含以下css规则：

html,body {
   height: 100%;
   margin: 0;
}    
#game {
        width: 1000px;
        height: 1000px;
        background-image:url(../img/test.jpg); 
        background-attachment: scroll;
        background-repeat: no-repeat;
    }

HTML：

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="game">

<div class="moneybar">
   <div class="moneyscore brown" id="score">0</div>
</div>

</div>
</body>
</html>

我想要实现的目标：在移动设备上，如果我有480px的屏幕，我只能看到背景图像的一部分。那没关系。但我也希望能够“导航”。（拖动/滚动）背景的其余部分。

问题：背景不会移动＆＃39;，＆＃39;滚动＆＃39; ......我不知道使用哪个术语。

我正在制作一个简单的游戏，所以如果我在地图的顶部放置一个建筑物（这是全屏背景图像），我应该能够向下导航并查看其他建筑物。我希望我已经足够清楚了。

Answer 1

我不清楚你的问题究竟是什么结果。但如果我理解正确，那么你只需删除：

body {
margin: 0;
padding: 0;
}

.game {
width: 1000px;
height: 1000px;
background: radial-gradient(blue, green , yellow, orange, red);
}

.game .scorebar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 36px;
line-height: 36px;
color: rgb(255, 255, 255);
font-size: 24px;
text-align: center;
font-weight: bold;
font-family: arial, helvetica, sans-serif;
background-color: rgb(127, 0, 0);
}

工作示例：

<div class="game">

<div class="scorebar">Score Bar</div>
</div>

val map4: Map[String, String] = map1 ++ map2

css导航背景图像

1 个答案: