Création d'images transparentes avec CSS est facile.
Le CSS opacity propriété est une partie de la recommandation de CSS3.
Exemple 1 - Création d'une image transparente
La propriété CSS3 pour la transparence est l' opacity .
D'abord, nous allons vous montrer comment créer une image transparente avec CSS.
Image ordinaire:
La même image avec transparence:
Regardez le CSS suivant:
Exemple
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Essayez - le vous - même » L' opacity propriété peut prendre une valeur de 0,0 à 1,0. La valeur inférieure, plus transparente.
IE8 et plus tôt l' utilisation filter:alpha(opacity=x) . Le x peut prendre une valeur de 0 - 100. Une valeur plus faible rend l'élément plus transparent.
Exemple 2 - Transparence de l'image - Bougez Effet
Passez la souris sur les images:
Le CSS ressemble à ceci:
Exemple
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 */
}
Essayez - le vous - même » Le premier bloc de CSS est similaire au code dans l'exemple 1. De plus, nous avons ajouté ce qui devrait se produire quand un utilisateur survole l'une des images. Dans ce cas, nous voulons l'image pour ne pas être transparent lorsque l'utilisateur survole. Le CSS est pour cette opacity:1; .
Lorsque le pointeur de la souris se déplace loin de l'image, l'image sera à nouveau transparent.
Exemple 3 - texte dans la case Transparent
Ceci est un texte qui est placé dans la boîte transparente.
Le code source ressemble à ceci:
Exemple
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 5%;
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.</p>
</div>
</div>
</body>
</html>
Essayez - le vous - même » Tout d' abord, nous créons un <div> élément (class="background") avec une image de fond, et une frontière. Ensuite , nous créons une autre <div> (class="transbox") à l' intérieur du premier <div> . Le <div class="transbox"> ont une couleur de fond, et une frontière - la div est transparente. A l' intérieur du transparent <div> , nous ajoutons un texte dans un <p> élément.