[Résolu] Empêcher la transparance image png

Bonjour,

Je souhaite savoir s'il y à un moyen d'empêcher la transparance d'une image png au survol?

Je fais un zoom sur image au survol d'une image png avec transparance indispensable sur une page mais qui est ennuyante sur une autre alors, j'ai essayé de la placer dans une div avec un z-index mais, cela ne change rien.

Est-ce possible?

Bonjour,

vous pouvez (si j'ai bien compris) appliquer la propriété opacity sur votre image pour obtenir l'effet souhaité.

rodolpheb a écrit :
Bonjour,

vous pouvez (si j'ai bien compris) appliquer la propriété opacity sur votre image pour obtenir l'effet souhaité.

J'ai essayé mais en fait l'opacité par défaut défaut doit être à 1 et donc je ne vois pas comment y remédier.

Je ne saisis toujours pas trop bien et sans code c'est plutôt de la divination (ou devinette).
Voici un exemple en appliquant une classe qui permet de choisir à quel élément vous affectez l'opacité.
Modifié par rodolpheb (08 Apr 2013 - 16:31)

rodolpheb a écrit :
Je ne saisis toujours pas trop bien et sans code c'est plutôt de la divination (ou devinette).
Voici un exemple en appliquant une classe qui permet de choisir à quel élément vous affectez l'opacité.

Le problème c'est que même

opacity:1;

mon image reste transparante.

En fait le texte d'à côté est visible (par dessus) avec un z-index moins élevé

pour la div de mon image:

opacity:1;
z-index:100!important; (avec ou sans important)

pour la div contenant le texte:

z-index:1!important; (avec ou sans important)

mon image reste transparante (le blanc de mon image .png pas en .jpg) avant survol, elle est positionnée à côté et cela ne pose pas de problème mais au survol, elle passe au dessus de la div d'à côté (c'est un choix) et on voit le texte en dessous.
Modifié par barale61 (08 Apr 2013 - 20:26)

Envoyez définitivement un bout de code de quoi rognez quelque chose

En mettant une couleur de fond a la balise image, ce sera cette couleur qui sera visible dans les zone translucide de l'image (idem pour un gif avec transparence).
++

gc-nomade a écrit :
En mettant une couleur de fond a la balise image, ce sera cette couleur qui sera visible dans les zone translucide de l'image (idem pour un gif avec transparence).
++

Merci en mettant une couleur sur la balise img ça marche.

J'avoue ne pas comprendre ce qui a permis de résoudre ce problème.

@rodolphe

Une couleur de fond sur la balise img rend opaque les zones translucide d'un gif ou png.

La transparence de l'image montre alors le background appliqué, cela peut-etre une couleur, d'autres images (background-multiples), des gradient CSS et/ou des box-shadow internes.

(Bon il y a aussi les logiciels graphique pour ça )

@gc-nomade

J'essaye de reproduire un exemple concret mais je n'y parviens pas. La couleur de fond sur l'image n'apporte rien.

Je prends depuis le début de ce sujet le problème à l'envers j'imagine!

Peut-etre que ce morceau de code te permettra de comprendre avec des png transparent et un effet de hover: http://dabblet.com/gist/5344386
Modifié par gc-nomade (09 Apr 2013 - 11:34)

Exemple à la c**

Plus lent que moi tu meurs...

@6l20: si j'enlève cette propriété il n'y a aucun changement

.backgroundcolor:hover {
  background:#99CCFF;
}

*truc fait en 4s, à la va vite

rodolpheb a écrit :
@6l20: si j'enlève cette propriété il n'y a aucun changement

.backgroundcolor:hover {
  background:#99CCFF;
}

Oui, ça semble logique, non ? Si tu supprimes l'action du survol, plus d'action...
Si tu associes une couleur d'arrière plan à la classe backgroundcolor

.backgroundcolor{
  background:#99CCFF;
}

La couleur de fond de l'image se voit sur les parties transparentes de l'image, je l'ai appliqué au survol pour coller au sujet et illustrer le propos de gc-nomade.

Penses à faire une petite sieste ou à corser un peu le café, ça ira mieux après

Je veux bien être pris pour un fou et je me permets de questionner le maitre que tu es....

Même si c'est très banal et peu important j'insiste en ne voyant pas d'effet du hover avec une couleur de fond dans ton exemple.
Et l'action existe malgré tout....

heu, il y a une deuxieme image plus bas, ... genre logo d'alasacreations

L'effet est sur la seconde image (le logo alsacreations) qui se trouve tout en bas de la page dans l'exemple de Sylvain.