Image CSS transparente/opaque
Images CSSTransparent/Opaque
Il est facile de créer des images transparentes en utilisant CSS.
REMARQUE : La propriété CSS Opacity fait partie des recommandations CSS3 du W3C.
Exemple 1 - Création d'une image transparente
La propriété de transparence en CSS3 est opacité.
Tout d'abord, nous allons vous montrer comment créer une image transparente avec CSS.
Image normale
Même image avec transparence :
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>Exécutez le programme et voyez
Regardez le CSS suivant :
{
opacity:0.4;
filtre : alpha(opacity=40); /* Pour IE8 et versions antérieures */
}
Les navigateurs Firefox, Chrome, Opera et Safari peuvent utiliser l'attribut de transparence pour l'image. devient opaque. Les valeurs de l'attribut d'opacité vont de 0,0 à 1,0. Des valeurs plus petites rendent l'élément plus transparent.
IE8 et les versions antérieures utilisent le filtre : alpha (opacity= x). Les valeurs que x peut prendre sont comprises entre 0 et 100. Des valeurs inférieures rendent l'élément plus transparent.
Exemple 2 - Transparence de l'image - Effet de survol
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
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 */
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>Style CSS :
{
opacity:0.4;
filter:alpha(opacity=40); /* Pour IE8 et versions antérieures */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* Pour 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, nous voulons que l’image soit claire lorsque l’utilisateur la survole.
Ce CSS est : opacity=1.
IE8 et versions antérieures : 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
Le texte est dans une boîte transparente. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes.
Le code source est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div.background
{
width:500px;
height:250px;
background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color: #fcffe0;
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>人生就像一张纸，行走间，如素笺染墨。每一次经历都是一笔浓墨或淡彩;每一次成功或挫折，每一次心跳都是一个不同凡响的音符，淡然或张狂，如那枝上的鸟儿，可以自由恋爱，倾心欢唱，即使这素淡的冬日，也有余韵绕梁……
</p>
</div>
</div>
</body>
</html>Exécutez le programme et essayez-le
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
