Modifier alpha pour un vol stationnaire de l'image dans la norme CSS2?

StackOverflow https://stackoverflow.com/questions/1173914

  •  19-09-2019
  •  | 
  •  

Question

Je suis en train d'ajouter un effet alpha pour mon image. l'image est dans le coin arrondi de forme rectangulaire. Je sais qu'il ya des attributs pour changer l'alpha dans CSS3, mais je suis en train d'être conforme à la norme w3c, qui est encore CSS2.

Désolé je n'ai pas dit à ma question correctement ealier. Je suis en train de changer l'alpha quand je passe la souris sur l'image en utilisant CSS2. Je pense à utiliser le « background-image » pour 100% d'alpha, et utiliser la balise img pour 50% d'alpha. est-il une meilleure façon de le faire?

Était-ce utile?

La solution

Si l'image est une PNG , vous pouvez inclure alpha directement dans l'image. Bien sûr, cela nécessiterait la PNG Fix script pour IE6.

Dans le cas contraire, vous pouvez utiliser les CSS pour définir la transparence.

Edit: Mise à jour au travail que sur le vol stationnaire, notez que cela ne fonctionnera pas dans IE6

. 
img.transparent{
    filter: alpha(opacity=100); /* internet explorer */
    opacity: 1;           /* fx, safari, opera, chrome */
}

img.transparent:hover {
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
}

Autres conseils

La façon typique un développeur web met en œuvre les effets transparents utilise un fichier PNG partiellement transparent en arrière-plan. 

div {
  background: #FFF url(img/bg.png) repeat top left;
}

Utilisation du .png fonctionnera comme on peut s'y attendre, mais l'opacité ne fonctionne pas comme prévu: 

div {
  filter: alpha(opacity=50); /* IE */
  -moz-opacity: 0.5; /* Firefox */
  -webkit-opacity: 0.5; /* Older Safari, Webkit */
  opacity: 0.5; /* CSS Standard - Always last in the list */
}

Il sera DIV 50% transparent, y compris tous ses enfants, le texte et tous. Vous aurez vraiment besoin de jouer avec les paramètres d'opacité pour vous assurer d'obtenir les résultats que vous attendez.

Une encore plus simple correctif, si vous pouvez supporter une expérience utilisateur un peu plus mauvais pour IE6, est d'utiliser une image alpha-transparent pour tous les navigateurs modernes, et d'envoyer une image sans transparence (ou tout simplement une couleur) à IE6. On dirait un peu moins pour les quelques utilisateurs, mais il est beaucoup moins à maintenir le code.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top