Comment définir l'opacité CSS-Questions et réponses frontales-php.cn

Comment définir l'opacité CSS

藏色散人

Libérer： 2023-01-04 09:34:09

original

4523 Les gens l'ont consulté

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.

Comment définir l'opacité CSS

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.

Comment définir lopacité CSS

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);}

Copier après la connexion

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）.

Copier après la connexion

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;

Copier après la connexion

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>

Copier après la connexion

Effet :

Comment définir lopacité CSS