Maison > Article > interface Web > Comment définir l'opacité CSS
Comment définir l'opacité CSS
- 藏色散人original
- 2021-04-02 10:59:474483parcourir
Comment définir l'opacité CSS : créez d'abord un exemple de fichier HTML ; puis utilisez la balise img pour introduire l'image ; enfin ajoutez le style CSS à la balise de style comme "opacité : 0,5 ;" l'image.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3
css peut utiliser deux méthodes : filter:alpha () et opacité Définissez l'opacité Lorsque vous utilisez directement l'opacité pour définir l'opacité, la plage de taille est comprise entre 0 et 1. Lorsque vous utilisez filter:alpha(), la plage de taille est comprise entre 1 et 100.
filter:alpha(), comme l'opacité, définit la transparence, mais l'opacité est incompatible dans IE8 et versions antérieures, alors définissez l'attribut de filtre
a:hover { opacity: 1; filter: alpha(opacity=100);}Quand l'opacité ; est utilisé pour définir directement la transparence, sa plage de tailles est comprise entre 0 et 1, et lorsqu'elle est égale à 1, elle est opaque. Lorsque filter:alpha() est utilisé pour définir l'opacité, sa plage de tailles est comprise entre 0 et 100, soit 100. . Lorsqu'il est opaque
Attributs de base de filter:alpha()
filter：alpha（opacity，finishopacity，style，startX，startY，finishX，finishY）.
opacité : niveau de transparence, la plage est de 0 à 100, 0 représente complètement transparent, 100 représente complètement opaque.
finishopacity : Lors de la définition de l'effet de transparence du dégradé, il est utilisé pour spécifier la transparence à la fin, et la plage est également de 0 à 100.
style : définissez le style de transparence du dégradé. Une valeur de 0 représente une forme uniforme, 1 représente une forme linéaire, 2 représente une forme radiale et 3 représente un rectangle.
startX et startY : représentent les coordonnées X et Y de départ de l'effet de transparence dégradé.
finishX et finishY : représentent les coordonnées X et Y de la fin de l'effet de transparence dégradé.
attribut d'opacité :
opacity: value|inherit;
valeur spécifie l'opacité. De 0,0 (entièrement transparent) à 1,0 (entièrement opaque).
inherit doit hériter de la valeur de l'attribut opacity de l'élément parent.
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>图像透明度</h1>
<p>opacity 属性规定元素的透明度。值越低，越透明：</p>
<p>50% 不透明度的图像：</p>
<img src="/i/photo/tulip-red.jpg" alt="Tulip" width="600" style="max-width:90%">
</body>
</html>Effet :
Apprentissage recommandé : "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!