Bild im Vollbild zeigen |
Quellcode |
<html> <head> <style type="text/css"> div#fullscreen {background-image: url('../Bilder/Life.jpg'); background-size: cover;background-attachment: fixed;background-repeat: no-repeat;height: 650px;padding: 25px;border: Solid 1px Silver;} div#fullscreen:fullscreen {font-size: 1em;letter-spacing: 2px;} div.title {color: transparent;} button#button {background-color: Transparent;font-size:1em;color:white;width: 300px;border: Solid 0px rgba(86, 187, 248,0.8);transition: background-color 0.5s;} button#button:hover {cursor: Pointer;background-color: rgba(135,206,250,0.8);} </style> <head> <body > <div id="fullscreen"> <p><button type="button" id="button">umschalten</button></p> </div> <script> let fullscreen = document.querySelector("#fullscreen"); let button = document.querySelector("#button"); button.addEventListener("click", () => { if (!document.fullscreenElement) { fullscreen?.requestFullscreen(); } else { document.exitFullscreen(); } }); </script> </body> </html> |