Maison >interface Web >tutoriel CSS >Comment définir la transparence dans les styles CSS
Comment définir la transparence dans les styles CSS
- 清浅original
- 2018-12-06 11:11:576209parcourir
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)
<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 :
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<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 :
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!