Maison > Article > interface Web > Comment définir la transparence dans les styles CSS

Comment définir la transparence dans les styles CSS

清浅original: 2018-12-06 11:11:576152parcourir

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; ".

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;

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>

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>

Les rendus sont les suivants :

Comment définir la transparence dans les styles CSS

Résumé : Ce qui précède est tout cet article Le contenu est ici, j'espère qu'il sera utile à l'étude de chacun.

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!

html5 firefox css chrome css3 html Filter 继承 animation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser la fonction calc() en CSSArticle suivant：Comment utiliser la fonction calc() en CSS

Articles Liés

Voir plus