image CSS transparent / opaque
L'utilisation de CSS est facile de créer une image transparente.
Remarque: la propriété CSS Opacitéfait partie des recommandations du W3C CSS3.
D'autres exemples
Créer une image transparente - hover effet
Créer une zone de texte a une image d'arrière - plan transparent
Exemple 1 - Créer une image transparente
La transparence dans la propriété CSS3 estopacité.
Tout d'abord, nous allons vous montrer comment créer une image transparente avec CSS.
Image normale
La même image avec transparence:
Considérons le CSS suivant:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, Opera et Safari navigateur utilise les propriétés de transparence de l'image peut devenir opaque. Opacité valeur de la propriété de 0,0 à 1,0. Des valeurs plus petites font l'élément le plus transparent.
IE8 et les versions antérieures utilisent filtre: alpha (opacity = x). X peut prendre des valeurs 0-100. Des valeurs plus faibles font l'élément le plus transparent.
Exemple 2 - Transparence de l'image - hover effet
Déplacez votre souris sur l'image:
CSS style:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
Le premier bloc est le code CSS dans l'exemple 1, et similaires. En outre, nous avons également ajouté ce qui se passe lorsque l'utilisateur déplace les survols de la souris sur l'une des images. Dans ce cas, lorsque l'utilisateur déplace la souris sur l'image, nous espérons que l'image soit claire.
Ceci estCSS: opacité = 1.
IE8 et l'utilisation antérieure: filtre: alpha (opacity = 100 ).
Lorsque le pointeur de la souris loin de l'image, l'image sera re-transparence.
Exemple 3 - Texte de la boîte transparente
Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente.
Le code source est la suivante:
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
Tout d'abord, nous créons une hauteur fixe et la largeur de l'élément div avec une image de fond et de la frontière. Ensuite, nous créons un des éléments div plus petits à l'intérieur du premier div. Cette div ont également une largeur fixe, couleur de fond, frontière - et il est transparent. A l'intérieur du div transparent, nous ajoutons un texte dans l'élément P.