CSS在图像全屏上放置div_Css_Html_Fullscreen

CSS在图像全屏上放置div

css html

CSS在图像全屏上放置div,css,html,fullscreen,Css,Html,Fullscreen,我正在用Tululo制作一个HTML5游戏我想全屏玩这个游戏。我使用CSS全屏显示游戏。在Tululoo游戏（div）下面有一个图像，我想在其中显示分数。我给分数一个X和Y的位置，在图片的顶部当我激活全屏时，TululoGoMeA将集中在页面的中间。现在我想把分数图像放在游戏下面，分数放在图像上完全相同的点上，就像我在游戏没有全屏时做的那样，放在页面的左上方。由于屏幕大小的差异，我无法给出分数的X和Y位置我需要如何解决这个问题这是我的HTML： <html lang='en'>

我正在用Tululo制作一个HTML5游戏

我想全屏玩这个游戏。我使用CSS全屏显示游戏。在Tululoo游戏（div）下面有一个图像，我想在其中显示分数。我给分数一个X和Y的位置，在图片的顶部

当我激活全屏时，TululoGoMeA将集中在页面的中间。现在我想把分数图像放在游戏下面，分数放在图像上完全相同的点上，就像我在游戏没有全屏时做的那样，放在页面的左上方。由于屏幕大小的差异，我无法给出分数的X和Y位置

我需要如何解决这个问题

这是我的HTML：

<html lang='en'>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var scoreteen = 0;
var scoremutant = 0;
var fullscreenteller = 0;

window.onload = function () {
    document.getElementById('tululoogame').style.display = 'none';
    document.getElementById('scoreteen').style.display = 'none';
    document.getElementById('scoremutant').style.display = 'none';
}

function laatgamezien() {
    document.getElementById('tululoogame').style.display = 'block';
    document.getElementById('play').style.display = 'none';
    document.getElementById('scoreteen').style.display = 'block';
    document.getElementById('scoremutant').style.display = 'block';
}

function launchFullscreen(element) {
laatgamezien(); 
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

function dumpFullscreen() {
  console.log("document.fullscreenElement is: ", document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
  console.log("document.fullscreenEnabled is: ", document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
}

document.addEventListener("fullscreenchange", function(e) {
  console.log("fullscreenchange event! ", e);
});
document.addEventListener("mozfullscreenchange", function(e) {
  console.log("mozfullscreenchange event! ", e);
});
document.addEventListener("webkitfullscreenchange", function(e) {
  console.log("webkitfullscreenchange event! ", e);
});
document.addEventListener("msfullscreenchange", function(e) {
  console.log("msfullscreenchange event! ", e);
});

function puntvoorteen(){
if (NaN === (scoreteen)) {  
    scoreteen = 0;
}
scoreteen++;
tekst = scoreteen;
document.getElementById("scoreteen").innerHTML = tekst;
} 
function puntvoormutant(){
if (NaN === (scoremutant)) {    
    scoremutant = 0;
}
scoremutant++;
tekst = scoremutant;
document.getElementById("scoremutant").innerHTML = tekst;
} 
</script> 
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='pragma' content='no-cache' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width, height=device-height' />
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
<meta charset='utf-8' />
</head>
<body style='background: black; margin: 0; padding: 0; overflow: hidden;'>
<div id="play"> 
    <img src="afbeeldingen/playbutton.png" width="180" height="180" onclick="launchFullscreen(document.documentElement);" />
</div>
<div id='tululoogame'></div>
<img src="afbeeldingen/opzetscore.png" width="1024" height="98" id="scorepicture">
<div id="scoreteen"> </div>
<div id="scoremutant"> </div>
<script type='text/javascript' src='game.js'></script>
</body>
</html>

还有一些截图：

#scoreteen {
        position:absolute;      
        color:white;
        left: 680px;
        top: 670px;
        font-size: 30px;
}
#scoremutant {
        position:absolute;      
        color:white;
        left: 320px;
        top: 670px;
        font-size: 30px;
}

#play {
 position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 } 

#tululoogame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  /*height: 100vh;
  width: 100vw;*/
 }

 #scorepicture {

 }