Pseudo Mot de passe
fleche Inscription
fleche Mot de passe oublié ?
Informations Générales
Chargement en cours...
Nombre de Visites fleche [ 139916 ]
Votre IP fleche [ 38.103.63.16 ]
Vous êtes ici : Home Page Dossiers Trucs et astuces (CSS) Transparence sur element
Imprimer Imprimer le document

Informations Membres

[195] Posts sur le forum
[177] Membres inscrits
Il y a en ligne :
  arrow 0 Membre
  arrow 4 Invités
fled Membre en ligne:
Aucun

Partenariat

Partenariat Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers. Rendez-vous dans « Partenariat » pour en savoir plus.

Nom de domaine

www.

Partenaires

Alsacreations
L'éditeur JavaScript
WebRankInfo
DicoDuNet
Noogle

CSS - Appliquer une transparence sur un élément (Opacity)

Auteur : 3L!X | Créé le : 30/07/2007 à 16H30

Avec la propriété "opacity", nous pouvons changer l'opacité de n'importe quel élément afin de créer un effet de transparence.
Mais comme, dans bien souvent des cas, IE nous pose problème, car il ne prend pas en charge cette propriété.

La propriété CSS que IE comprend est:

filter:alpha(opacity=50);

La propriété CSS que Netscape comprend est:

-moz-opacity: 0.5;

Nous allons donc, rajouter ces propriétés dans nos CSS, afin d'être compatible.

Exemples avec Opacity

-Méthode non compatible avec IE et Netscape:

opacity: 1 opacity: 0.5 
<style type="text/css">
<!--
div {
position: relative;
}
.span_1 {
position: absolute;
top: 10px;
left: 10px;
padding: 20px;
background: yellow;
}
.span_2 {
position: absolute;
top: 25px;
left: 25px;
padding: 20px;
background: green;
color: white;
opacity: 0.5;
}
-->
</style>

<div>
<span class="span_1">opacity: 1</span>
<span class="span_2">opacity: 0.5</span>
</div>

-Méthode compatible avec tous navigateurs:

opacity: 1 opacity: 0.5 
<style type="text/css">
<!--
div {
position: relative;
}
.span_1 {
position: absolute;
top: 10px;
left: 10px;
padding: 20px;
background: yellow;
}
.span_2 {
position: absolute;
top: 25px;
left: 25px;
padding: 20px;
background: green;
color: white;
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
}
-->
</style>

<div>
<span class="span_1">opacity: 1</span>
<span class="span_2">opacity: 0.5</span>
</div>

(0) commentaires - Voir/EditerAjout commentaire

Haut de page