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

Informations Générales

[408] Posts sur le forum
[407] Membres inscrits
Il y a en ligne :
arrow 0 Membre
arrow 0 Invité
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.

Publicité


Prestataire

N°1 de l'hébergement, location de serveurs, nom de domaines et téléphonie.
(OVH est recommandé par Webelix.net)

www.

Nos Partenaires

Alsacreations
Dreamseed
L'éditeur JavaScript
DicoDuNet
Noogle
Tutopla.net

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>

[2] commentaires - Voir/EditerAjout commentaire

Haut de page