Comment définir la transparence dans les styles CSS-tutoriel CSS-php.cn

Comment définir la transparence dans les styles CSS

清浅

Libérer： 2021-04-18 14:49:16

original

6211 Les gens l'ont consulté

Comment définir la transparence dans le style CSS : créez d'abord un exemple de fichier HTML ; puis créez une image via img ; enfin définissez la transparence via l'attribut opacity en CSS, avec la syntaxe telle que "opacity: value|inherit; ".

Comment définir la transparence dans les styles CSS

L'environnement d'exploitation de cet article : système Windows 7, ordinateur Dell G3, version HTML5&&CSS3.

En CSS, nous pouvons modifier la transparence d'un élément en y ajoutant l'attribut opacity. La valeur de l'opacité est de 0 à 1. Plus la valeur est petite, plus il est transparent

. Nous utilisons souvent CSS sur la page. Utilisez l'un des styles pour définir la transparence et embellir la page. Aujourd'hui, je vais vous présenter comment utiliser l'attribut d'opacité en CSS. Il a une certaine valeur de référence. J'espère que cela sera utile à tout le monde. 🎜>

attribut d'opacité

opacity: value|inherit;

Copier après la connexion

valeur : utilisé pour définir l'opacité. De 0,0 (entièrement transparent) à 1,0 (entièrement opaque)

inherit : La valeur de l'attribut opacity doit être héritée de l'élément parent

Comment définir la transparence dans les styles CSS

Exemple :

Définir l'image sur opaque

<body>
未设置透明度：
<img  src="images/5.jpg"   style="max-width:90%" alt="Comment définir la transparence dans les styles CSS" >
设置了透明度：
<img  src="images/5.jpg"   style="max-width:90%" alt="Comment définir la transparence dans les styles CSS" >
</body>

Copier après la connexion

L'effet est le suivant :

Comment définir la transparence dans les styles CSS

Remarque :

Utilisez l'attribut opacity pour définir la transparence dans les navigateurs IE9, Firefox, Chrome, Opera. La propriété d'opacité peut être définie sur des valeurs comprises entre 0,0 et 1,0. Plus la valeur est petite, plus elle est transparente.

IE8 et versions antérieures utilisent le filtre filter:alpha(opacity=x), x peut prendre des valeurs de 0 à 100. Plus la valeur est petite, plus elle est transparente.

[Cours recommandés : Cours CSS]

Partage de cas

Utilisez l'attribut opacité pour créer une flèche vers le bas imminente

Dans ce cas, vous devez utiliser l'attribut d'animation en CSS3 pour spécifier l'animation en définissant la valeur de l'animation attribut. Le temps d'exécution et la conception de la transparence changent au cours du processus d'animation

<style>
.box
  {  -webkit-animation:box 5s infinite;
    -webkit-animation-fill-mode: both;
      }
@-webkit-keyframes box
 {
from
{   
 opacity: 0;
  }
 to
{
  opacity: 1;
 }
  }
</style>	
</head>
<body>
<div class="box">
<img  src="images/jiantou.png" alt="Comment définir la transparence dans les styles CSS" >
</div>
</body>

Copier après la connexion

Les rendus sont les suivants :

Comment définir la transparence dans les styles CSS