时间戳

首页 > 解决方案 > 修复我正在使用 HTML 制作的游戏的背景图像

html - 修复我正在使用 HTML 制作的游戏的背景图像

问题描述

又是我带着另一个新的决赛项目。

我正在尝试使用 HTML 制作游戏，而我现在正在制作主菜单，但我一直坚持下去。

背景图像不合适，我已经搜索并尝试了我在互联网上可以找到的所有解决方案，但它就是不正确。

这是它的样子。如您所见，它不适合。我试图使 bg 图像适合而无需滚动。我使用了 1920x1080 的图像

body {
  background-image: url("main menu bg.png");
   background-size:     contain;                     
    background-repeat:   no-repeat;
	background-size: 100% 100%;
    background-position: center top; 
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet"
   type = "text/css"
   href = "stylemenu.css" />
<title> Trio of Battles </title>
</head>
<body>
<button button style="background-color: transparent;" onclick="myFunction()"><img src="start button.png"></button>
</body>
</html>

标签： htmlcss

解决方案

通过将 body height 更改为 100vh，您可以确保没有滚动条。并且使用包含，图像将始终适合屏幕。

body {
    background: url("main menu bg.png")no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: contain;
    overflow: auto;
    margin: 0;
    height: 100vh;

}

推荐阅读