Cet article vous présentera un concept qui vous aidera à comprendre l'opacité dans et vous dire comment contrôler ce paramètre. Les pointeurs suivants seront traités dans cet article,
- Opacité en CSS
- Opacité héritée des éléments en cascade
- Paramètre d'attribut RGBA pour les éléments en cascade
- Changements d'opacité sur l'effet de survol
L'opacité d'arrière-plan d'un élément est un paramètre de fonctionnalité utile dans la conception HTML. En définissant le niveau d'opacité (inverse de la transparence), un concepteur peut contrôler la visibilité de l'élément via la propriété d'opacité CSS. Ceci est généralement utilisé comme paramètre d'arrière-plan en cas de cascade d'éléments, placés les uns au-dessus des autres.
Le scénario le plus courant dans lequel cette fonctionnalité est utilisée est le suivant:
- Une image d'arrière-plan partiellement transparente est placée derrière un élément de texte.
- L'image d'arrière-plan est légèrement visible, elle ne domine donc pas le texte devant.
- L'image peut être entièrement mise au point lorsque l'utilisateur choisit explicitement de la voir.
Vous voudrez peut-être lire sur le avant de commencer à apprendre l'opacité CSS.
Pour un didacticiel CSS complet, visitez Tutoriel CSS Edureka pour les débutants . Vous aurez un excellent aperçu de la façon dont CSS doit être utilisé pour augmenter la conception Web HTML.
Passer à cet article sur l'opacité en CSS
Opacité en CSS
En CSS, l'opacité est définie comme une valeur numérique comprise entre 0,0 et 1,0. Les valeurs plus proches de zéro représentent plus de transparence, l'image sera très claire en visibilité. Commençons par un exemple d'image affichée avec une transparence de 50%. Voir l'exemple 1 ci-dessous.
Exemple 1: Image d'arrière-plan définie sur semi transparence
img {opacity: 0.5 filter: alpha (opacity = 50) / * Pour IE8 et versions antérieures * /} 
Exemple 1: sortie
Image originale (100% d'opacité)
Image avec réglage d'opacité de 50%
Dans l'exemple ci-dessus, il n'y avait qu'un seul élément - une image. D'autres éléments peuvent également être définis avec le paramètre d'opacité comme le texte, les éléments div, etc.
Passer à cet article sur l'opacité en CSS
Opacité héritée des éléments en cascade
Lorsque les éléments sont empilés les uns sur les autres, si l'élément d'arrière-plan a le paramètre d'opacité, il est hérité par tous les éléments enfants. C'est le Paramètres par défaut . Cela signifie que si une zone de texte est placée sur une image et que l'image a un paramètre d'opacité de 0,5, l'image et l'élément de texte ne seront que partiellement visibles.
Prenons l'exemple d'un élément de texte enfant placé sur l'image TOM & JERRY dans notre prochain exemple. Nous pouvons voir l'effet d'opacité par défaut dans l'exemple 2.
.container {position: alignement du texte relatif: opacité au centre: 0,5} .centered {position: haut absolu: 50% à gauche: 50% transformation: traduction (-50%, -50%) couleur: bleu taille de la police: 40px} } TOM & JERRYExemple 2: le texte hérite de l'opacité de l'image parente
création d'un tableau d'objets en java
Passer à cet article sur l'opacité en CSS
Paramètre d'attribut RGBA pour les éléments en cascade
Il existe une autre manière de contrôler l'opacité avec des éléments en cascade. Si vous souhaitez que l'élément enfant ne soit pas affecté par l'opacité de son élément d'arrière-plan, vous pouvez utiliser Paramètre d'attribut RGBA .
Exemple 3: Utilisation du paramètre RGBA
arrière-plan: rgba (76, 175, 80, 1.0) / * L'image n'a pas de paramètre d'opacité * / / * Fond vert pour le texte avec une opacité de 100% * / / * Le texte de couleur bleue a une opacité de 100% * /
arrière-plan: rgba (76, 175, 80, 0.4) / * L'image n'a pas de paramètre d'opacité * / / * Fond vert pour le texte avec une opacité de 40% * / / * Texte bleu toujours visible avec une opacité de 100% * /
Après le code de couleur RVB, l’attribut «a» signifie alpha . La alpha Le paramètre est un nombre compris entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque).
Passer à cet article sur l'opacité en CSS
Changements d'opacité sur l'effet de survol
Dans certains scénarios, les concepteurs Web souhaitent que l'opacité varie selon que l'utilisateur se concentre ou non sur l'élément. Par exemple, disons qu'une image est définie sur une opacité de 50% par défaut. Cependant, lorsque l'utilisateur passe la souris sur l'image, nous voulons que l'image soit entièrement mise au point avec une opacité de 100%.
L'exemple 4 montre comment cela est fait.
Points communs à noter:
- Le paramètre d'opacité est une alternative à l'utilisation de l'attribut «visibilité» dans CSS. Cependant, l'utilisation du paramètre d'opacité permet de définir facilement différents degrés de transparence, allant de zéro à plein.
- Le niveau d'opacité doit être défini après des tests minutieux dans divers navigateurs. Lorsque l'opacité est définie sur des valeurs faibles, le texte ou l'image peut parfois devenir complètement invisible ou illisible.
- L'idée derrière l'utilisation de l'opacité est de mettre l'accent sur certains éléments tandis que d'autres éléments d'arrière-plan ne distraient pas l'attention de l'utilisateur. Ainsi, ces éléments d'arrière-plan sont définis avec une opacité inférieure.
- Dans Internet Explorer, pour IE8 et les versions antérieures, la propriété d'opacité est un paramètre de «filtre» compris entre 1 et 100. Dans tous les autres navigateurs, il va de 0 à 1.
Cela nous amène à la fin de cet article sur l'opacité en CSS.
Si vous souhaitez en savoir plus sur le développement Web, consultez le par Edureka. La formation de certification en développement Web vous aidera à apprendre à créer des sites Web impressionnants à l'aide des API HTML5, CSS3, Twitter Bootstrap 3, jQuery et Google et à les déployer sur Amazon Simple Storage Service (S3).
Si vous êtes toujours intéressé Si vous avez des questions, vous pouvez les poster dans la section commentaires de ce blog «Opacity In CSS», et nous vous répondrons dans les plus brefs délais.