Maison > Article > interface Web > Comment définir la transparence des images en CSS
Comment définir la transparence des images en CSS
- 青灯夜游original
- 2021-04-21 15:51:3920931parcourir
Comment définir la transparence de l'image avec CSS : 1. Utilisez l'attribut de filtre pour ajouter le style "filter:opacity(value%)" à l'élément d'image ; la valeur est comprise entre 0 et 100, et "0 % ; " est complètement transparent, " 100 % " signifie qu'il n'y a aucun changement dans l'image. 2. Utilisez l'attribut opacity, la syntaxe "opacity: value".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Méthode 1 : Utiliser l'attribut filter--filter:opacity(%)
L'attribut filter définit l'effet visuel de l'élément (généralement) (par exemple : flou et saturation ) .
opacité(%) : utilisé pour convertir la transparence de l'image. La valeur définit l'échelle de la conversion. Une valeur de 0 % signifie une transparence totale, une valeur de 100 % signifie aucune modification de l'image. Les valeurs comprises entre 0% et 100% sont des multiplicateurs linéaires de l'effet, équivalents à multiplier le nombre d'échantillons d'image. Si la valeur n'est pas définie, la valeur par défaut est 1. Cette fonction est très similaire à l'attribut d'opacité existant, sauf que grâce au filtre, certains navigateurs fournissent une accélération matérielle pour améliorer les performances.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img1{
-webkit-filter: opacity(50%); /* Chrome, Safari, Opera */
filter: opacity(50%);
}
.img2{
-webkit-filter: opacity(20%); /* Chrome, Safari, Opera */
filter: opacity(20%);
}
</style>
</head>
<body>
<div>
<p>原图：</p>
<img src="img/1.jpg" style="max-width:90%"/ alt="Comment définir la transparence des images en CSS" >
</div>
<div>
<p>透明度为50%：</p>
<img class="img1" src="img/1.jpg" style="max-width:90%"/ alt="Comment définir la transparence des images en CSS" >
</div>
<div>
<p>透明度为20%：</p>
<img class="img2" src="img/1.jpg" style="max-width:90%"/ alt="Comment définir la transparence des images en CSS" >
</div>
</body>
</html> Rendu :
Méthode 2 : Utiliser l'attribut opacité
L'attribut Opacité définit le niveau de transparence d'un élément. Plage de valeurs : de 0,0 (entièrement transparent) à 1,0 (entièrement opaque).
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img1{
opacity: 0.5;
}
.img2{
opacity: 0.2;
}
</style>
</head>
<body>
<div>
<p>原图：</p>
<img src="img/1.jpg" style="max-width:90%"/ alt="Comment définir la transparence des images en CSS" >
</div>
<div>
<p>透明度为0.5：</p>
<img class="img1" src="img/1.jpg" style="max-width:90%"/ alt="Comment définir la transparence des images en CSS" >
</div>
<div>
<p>透明度为0.2：</p>
<img class="img2" src="img/1.jpg" style="max-width:90%"/ alt="Comment définir la transparence des images en CSS" >
</div>
</body>
</html>Rendu :
(Partage vidéo d'apprentissage : tutoriel vidéo CSS )
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!