Une fenêtre transparente sur une image opaque

Version imprimable

27/01/2016, 21h54
progdebutant

Une fenêtre transparente sur une image opaque

Bonsoir ;)

Existe-t'il une méthode pour avoir l'effet suivant :

Une grande image sur la page HTML et opaque, mais au centre un carré transparent permet de voir le centre de l'image.

Je pourrais obtenir ça avec une image PNG mais je voudrais éviter de charger une image supplémentaire.

Pourquoi charger une grande image, si l'on ne doit en voir que le centre ?

Je propose de charger une image au centre d'un fond de couleur, ici le noir.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  body, html {
    top: 0;
    left: 0;
    width: 100%;
    height : 100%;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("http://danielhagnoul.developpez.com/images/badge.jpg");
  }
</style>

29/01/2016, 23h37
progdebutant

Je te remercie de ton aide c'est super sympa !
Mais l'image dont je veux voir le centre c'est parce que c'est une image très grande et concentrée en pixel avec une bonne qualité et si j'en affiche qu'une partie (avec par exemple un canvas et drawimage) ça m'affiche la partie au pixel prés donc ça me fait le zoom d'office (et en plus pas avec la même qualité d'un vrai zoom).
D'autre part je ne dois pas découper cette image en une plus petite partie alors voilà, et ça me permet de pouvoir voir une autre partie de l'image si besoin.

Ton code est très utile par contre pour centrer une image en background ça m'est utile aussi.