Définir la transparence avec le code hexadécimal en HTML

1. Utilisez le CSS Hexcode pour assurer la transparence de l’arrière-plan en HTML
2. Utilisez la propriété CSS opacity pour rendre l’arrière-plan transparent en HTML
3. Utilisez la propriété CSS background pour rendre l’arrière-plan transparent en HTML

Cet article présentera des méthodes pour ajouter de la transparence aux éléments HTML. Nous utiliserons CSS pour ajouter de la transparence.

Utilisez le CSS Hexcode pour assurer la transparence de l’arrière-plan en HTML

Nous pouvons utiliser le code hexadécimal CSS pour fournir de la transparence à un élément HTML. Nous pouvons définir le code hexadécimal comme valeur de la propriété background. Le code hexadécimal que nous utiliserons est de huit chiffres. Le format du code hexadécimal à huit chiffres est #RRGGBBAA. Les six premiers chiffres représentent le code hexadécimal pour le rouge, le vert et le bleu, respectivement. Les deux derniers chiffres sont le code hexadécimal pour l’opacité.

Par exemple, créez un div et écrivez du texte dedans. En CSS, sélectionnez le div et définissez la propriété background sur #00ff0080. Le code hexadécimal #00ff00 représente la couleur verte et 80 représente l’opacité de la couleur. Cela créera un fond vert dans le texte et donnera l’opacité de 50% ou la valeur 128. L’équivalent binaire de la valeur hexadécimale 80 est 128. Ainsi, nous pouvons utiliser du code hexadécimal pour créer un élément transparent en HTML.

Exemple de code :

<div class="light">This is some text</div>

div {
    background: #00ff0080;
}

Utilisez la propriété CSS opacity pour rendre l’arrière-plan transparent en HTML

Nous pouvons créer un fond transparent en utilisant la propriété opacity en CSS. Nous pouvons utiliser cette propriété sur n’importe quel élément en HTML et rendre l’arrière-plan transparent. La propriété opacity définit l’opacité d’un élément. Il est chargé de définir le degré de masquage du contenu derrière un élément. La valeur va de 0.0 à 0.9. Les valeurs les plus basses ressemblent au niveau d’opacité le plus bas et vice versa. Cela signifie que lorsque la valeur d’opacité est proche de 0.0, le contenu derrière l’élément est plus visible. Et le contenu semble plus transparent. Nous pouvons également utiliser la représentation % pour définir l’opacité. Il va de 0% à 100%.

Par exemple, créez un div avec la classe bg. Écrivez du texte comme élément entre le div. En CSS, sélectionnez l’élément div et définissez l’arrière-plan sur yellow à l’aide de la propriété background-color. Ensuite, sélectionnez la classe bg à l’aide du sélecteur de classe. Ensuite, définissez opacity sur la valeur 0.5.

L’exemple ci-dessous crée une couleur d’arrière-plan jaune et contient du texte. La valeur d’opacité 0.5 ajoute une certaine quantité de transparence à l’élément. Nous pouvons changer la valeur de 0.0 à 1.0 pour tester le degré d’opacité dans l’exemple suivant. Ainsi, nous avons ajouté de la transparence à la couleur de fond dans le didacticiel.

Exemple de code :

<div class="bg">This is some text</div>

div {
    background-color: yellow;
}

.bg {
    opacity: 0.5;
}

Utilisez la propriété CSS background pour rendre l’arrière-plan transparent en HTML

Il y a un inconvénient à utiliser la propriété opacity. La valeur opacity définie dans l’élément parent s’applique à tous les éléments enfants. Pour se débarrasser de ce problème, nous pouvons utiliser la propriété CSS background. Nous pouvons spécifier la valeur rgba à l’élément et l’empêcher d’appliquer l’opacité aux éléments enfants. La propriété background utilise la fonction rgba pour spécifier les couleurs RVB avec leur opacité. La syntaxe de la fonction est indiquée ci-dessous.

rgba(red, green, blue, alpha)

Nous pouvons spécifier l’intensité des valeurs RVB dans la plage de 0 à 255. Nous pouvons également représenter la valeur en pourcentage dans la plage de 0 à 100%. Nous pouvons spécifier la valeur de alpha comme nous l’avons vu dans la première méthode.

Apportez quelques modifications CSS à l’exemple de code de la première méthode. Dans la sélection de div, supprimez la propriété background-color et ajoutez la propriété background. Écrivez la fonction rgba() comme valeur de la propriété. Définissez la valeur du rouge sur 255 et définissez 0 pour le vert et le bleu. Écrivez la valeur alpha sous la forme 0.2. Ensuite, supprimez la sélection de classe bg.

Les extraits de code ci-dessous créeront un arrière-plan rouge dans le texte et ajouteront un degré de transparence.

Exemple de code :

<div class="light">This is some text</div>

div {
 background:rgba(255,0,0, 0.2)
}