Images CSSTransparence/Opacité

Avec CSS, il est facile de créer des images transparentes.

Remarque :La propriété Opacity de CSS fait partie de la recommandation CSS3 du W3C.

Examples

Plus d’exemples

Créer une image transparente avec du texte et une image d'arrière-plan

Exemple 1 - Créer une image transparente

La propriété opacity de CSS3 estopacity。

Tout d'abord, nous allons vous montrer comment créer une image transparente à l'aide de CSS.

Image normale

klematis

La même image avec transparence :

klematis

Voir le CSS ci-dessous :

img { opacity:0.4; filter:alpha(opacity=40); /*IE8 et versions antérieures*/ }

IE9, Firefox, Chrome, Opera et Safari utilisent la propriété opacity pour rendre les images transparentes. La valeur de la propriété opacity varie de 0.0 à 1.0. Plus la valeur est faible, plus l'élément sera transparent.

IE8 et versions antérieures utilisent filter: alpha (opacity= x). La valeur de x peut être comprise entre 0 et 100. Des valeurs plus faibles rendent l'élément plus transparent.

Exemple 2 - Transparence d'image - Effet de survol

Déplacez la souris sur l'image :

klematisklematis

Styles CSS :

img { opacity:0.4; filter:alpha(opacity=40); /*IE8 et versions antérieures*/ } img:hover { opacity:1.0; filter:alpha(opacity=100); /*IE8 et versions antérieures*/ }

Le premier bloc CSS est similaire au code de l'exemple 1. De plus, nous avons ajouté ce qui se passe lorsque l'utilisateur survole l'une des images. Dans ce cas, lorsque l'utilisateur survole l'image, nous voulons que l'image soit nette.

Ce CSS est :opacity=1.

IE8 et versions antérieures utilisent :filter:alpha(opacity=100).

Lorsque le pointeur de la souris s'éloigne de l'image, l'image retrouvera sa transparence.

Exemple 3 - Texte dans une boîte transparente

Ce texte est dans une boîte transparente. Ce texte est dans une boîte transparente. Ce texte est dans une boîte transparente. Ce texte est dans une boîte transparente. Ce texte est dans une boîte transparente. Ce texte est dans une boîte transparente. Ce texte est dans une boîte transparente. Ce texte est dans une boîte transparente. Ce texte est dans une boîte transparente. Ce texte est dans une boîte transparente. Ce texte est dans une boîte transparente. Ce texte est dans une boîte transparente. Ce texte est dans une boîte transparente.

Le code source est le suivant :

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style>
div.background { width:500px; height:250px; background:url(https://www.example.com/images/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); /*IE8 et versions antérieures*/ } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; }
</style> </head> <body> <div class="background"> <div class="transbox"> <p>Ces textes sont dans une boîte transparente. Ces textes sont dans une boîte transparente. Ces textes sont dans une boîte transparente. Ces textes sont dans une boîte transparente. Ces textes sont dans une boîte transparente. Ces textes sont dans une boîte transparente. Ces textes sont dans une boîte transparente. Ces textes sont dans une boîte transparente. Ces textes sont dans une boîte transparente. Ces textes sont dans une boîte transparente. Ces textes sont dans une boîte transparente. Ces textes sont dans une boîte transparente. Ces textes sont dans une boîte transparente.</p> </div> </div> </body> </html>

Tout d'abord, nous créons un élément div avec une hauteur et une largeur fixes, avec une image d'arrière-plan et une bordure. Ensuite, nous créons un élément div plus petit à l'intérieur du premier div. Cette div a également une largeur fixe, une couleur d'arrière-plan et une bordure - et elle est transparente. À l'intérieur de la div transparente, nous ajoutons du texte dans un élément p.

autres extensions