CSS image d'opacité / transparence
Création d'images transparentes avec CSS est facile.
Remarque: La propriété d'opacité CSS est une partie de la recommandation du W3C CSS3.
Essayez vous-même - Exemples
Exemple 1 - Création d'une image transparente
La propriété CSS3 pour la transparence est l'opacité .
D'abord nous allons vous montrer comment créer une image transparente avec CSS.
L'image ordinaire:
La même image avec transparence:
Regardez la CSS suivante:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, Opera, et Safari utiliser la propriété d'opacité à la transparence. La propriété d'opacité peut prendre une valeur de 0,0 à 1,0. Une faible valeur rend l'élément le plus transparent.
IE8 et l'utilisation antérieure de filtre: alpha (opacity = x) . Le x peut prendre une valeur de 0 à 100. Une faible valeur rend l'élément le plus transparent.
Exemple 2 - Transparence de l'image - Effet Hover
Passez la souris sur les images:
Le CSS se présente comme suit:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
{
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 CSS est similaire au code dans l'exemple 1. En outre, nous avons ajouté ce qui devrait arriver quand un utilisateur survolez l'une des images. Dans ce cas, nous voulons l'image pour ne pas être transparent lorsque l'utilisateur survolez.
Le CSS pour cela est: opacité = 1 .
IE8 et plus tôt: filter: alpha (opacity = 100) .
Lorsque le pointeur de la souris s'éloigne de l'image, l'image sera transparente à nouveau.
Exemple 3 - Texte en boîte transparente
Ceci est un texte qui est placé dans la boîte transparente. Ceci est un texte qui est placé dans la boîte transparente. Ceci est un texte qui est placé dans la boîte transparente. Ceci est un texte qui est placé dans la boîte transparente.Ceci est un texte qui est placé dans la boîte transparente.
Le code source ressemble à ceci:
<html>
<head>
<style type="text/css">
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>
<head>
<style type="text/css">
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 un élément div (class = "background") avec une hauteur fixe et de la largeur, une image de fond, et une frontière. Ensuite, nous créons un petit div (class = "transbox") à l'intérieur de l'élément premier div. Le "transbox" div avoir une largeur fixe, une couleur de fond, et une frontière - et il est transparent. A l'intérieur du div transparente, nous ajoutons un peu de texte à l'intérieur un élément p.
0 commentaires:
Post a Comment
HELLO VISITORS THANKS FOR YOUR VISIT AND COMMENT