Ceci est simplement une question de faire une image alpha masquée (png). La clé est d'éviter de faire de la taille jumbo pour couvrir toute la page. Au lieu de cela faire un cadre de divs opaque (ou plus opaque) entourant le png du "trou". De cette façon, votre image ne doit pas être énorme et vous pouvez ajuster à n'importe quelle taille d'écran automatiquement. Le div parent serait de largeur/hauteur de 200%, ou si vous voulez avoir envie, vous pouvez simplement avoir la hauteur/largeur de 100%, et utiliser des maths fantaisie dans JS pour dimensionner dynamiquement les divs comme le port se déplace.
================
| div |
================
|div| port |div|
================
| div |
================
Voir ma réponse à une question similaire ici:
CSS see through porthole
Vous pouvez superposer une alpha avec un gradient .png radial. Vous pouvez également essayer d'utiliser les filtres CSS3 et IEs pour obtenir le même effet, mais cela deviendra probablement méchant. – William
Hmm, si j'utilisais un PNG, comment pourrais-je compenser les différents types de résolutions d'écran? – pufAmuf
Différentes résolutions d'écran peuvent être gérées avec un "cadre" de divs. Voir la réponse ci-dessous. –