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

标签 html css

又是我,又一个新的决赛元素。

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

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

Here's what it looks like. As you can see, it doesn't fit in right. I was trying to make the bg image fit in without having to scroll. I used a 1920x1080 image

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>

最佳答案

通过将主体高度更改为 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;

}

关于html - 修复我正在使用 HTML 制作的游戏的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57972908/

相关文章:

css - 增加 Visual Studio 的响应时间

html - 如何使导航栏中的元素居中?

javascript - jQuery onClick 适用于前两次点击,但此后停止

android - 字体不适用于 android chrome 和 firefox

php - 添加另一个下拉列表到动态 php、Mysql 表单以及另外 2 个下拉列表

html - 为什么只读输入字段无效

html - 将单选按钮放在图像上

html - 段落未使用 <p> 标记对齐

python - 在原始 HTML 文件上写回 Beautifulsoup 时出错

css - IE渲染问题