Définir l'opacité de l'arrière-plan dans CSS

1. Utilisez la propriété opacity pour créer une couleur transparente en CSS
2. Utilisez la fonction rgba() pour créer une couleur transparente en CSS
3. Utilisez des valeurs hexadécimales pour créer une couleur transparente en CSS

Dans cet article, nous présenterons trois méthodes pour créer une couleur transparente en HTML à l’aide de CSS. Il définira l’opacité de l’arrière-plan en CSS.

Utilisez la propriété opacity pour créer une couleur transparente en CSS

La propriété opacity est une des propriétés utilisées en CSS, notamment avec les couleurs. Nous pouvons utiliser des valeurs comprises entre 0 et 1 pour montrer l’opacité de la couleur ou d’un élément. Si la valeur est 1, cela signifie que la couleur est 100% opaque. Cela signifie que la couleur n’est pas du tout transparente. Si nous diminuons la valeur initialement, l’élément deviendra plus transparent. Si la valeur opacity est 0.5, la couleur deviendra semi-transparente ou 50 % transparente. Cependant, lors de l’utilisation de opacity, l’élément enfant devient également transparent.

Par exemple, créez un document HTML avec un titre h1 et une classe transparent. Définissez la background-color comme #cc33ff et la valeur opacity 0.4 après avoir sélectionné la classe transparent dans CSS. Si nous voulons que le titre et sa couleur d’arrière-plan deviennent plus transparents, nous pouvons diminuer la valeur d’opacité.

L’exemple ci-dessous montre que la couleur de fond et l’en-tête h1 deviennent transparents car on garde la valeur opacity, c’est-à-dire 0.4.

Exemple de code :

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #cc33ff;
    opacity: 0.4;
}

Utilisez la fonction rgba() pour créer une couleur transparente en CSS

La fonction rgba() définit les couleurs en utilisant le modèle rouge-vert-bleu-alpha. Le rbg dans la fonction rbga() signifie les valeurs de couleur pour le rouge, le vert et le bleu, tandis que a signifie l’opacité de la couleur. Chaque paramètre (rouge, bleu, vert) définit l’intensité de la couleur entre 0-255. Alors que la valeur de a doit être comprise entre 0-1. Par exemple rgba(255, 100, 100, 0.4). Plus la valeur de a est faible, plus la couleur sera transparente. L’élément enfant ne devient pas transparent, contrairement à celui de la propriété opacity. Si la valeur de a est 0.5, la couleur sera semi-transparente ou transparente à 50 %.

Par exemple, créez un document HTML avec l’en-tête h1 et la classe transparent. Écrivez le texte Hello World entre la balise de titre. Utilisez la fonction rgba() pour leur donner une couleur de fond à la classe. Mettez la valeur rgba comme rgba(255, 100, 100, 0.4). Diminuez la valeur de a pour le rendre plus transparent et augmentez la valeur de a pour le rendre plus opaque.

L’exemple ci-dessous montre que la couleur d’arrière-plan de l’en-tête devient transparente lorsque nous mettons la valeur de a comme 0.4. Cependant, l’élément enfant heading ne devient pas transparent.

Exemple de code :

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: rgba(255, 100, 100, 0.4);
}

Utilisez des valeurs hexadécimales pour créer une couleur transparente en CSS

Nous utilisons souvent des valeurs hexadécimales avec six caractères suivis de # pour donner une couleur spécifique à un élément HTML. Par exemple, #A5BE32. Nous pouvons rendre la couleur transparente en ajoutant deux valeurs numériques à la fin de la valeur hexadécimale et en en faisant une valeur hexadécimale à huit caractères. Par exemple, #A5BE3280. Ici, #A5BE32 désigne la couleur et 80 à la fin désigne l’opacité de la couleur. Si vous souhaitez une couleur transparente à 50%, vous pouvez utiliser la valeur 80 à la fin du code hexadécimal. Étant donné que l’échelle est 0-255 en couleurs RVB, la moitié serait 255/2 = 128, qui converti en hexadécimal devient 80. L’élément enfant ne devient pas transparent, contrairement à celui de la propriété opacity.

Par exemple, créez un document HTML avec l’en-tête h1 et la classe transparent, c’est-à-dire <h1 class="transparent">Hello world </h1>. Donnez la couleur de fond #A5BE32 à la classe. Ajoutez 80 à la fin du code hexadécimal pour le rendre transparent à 50%. De telle sorte que le code hexadécimal devienne #A5BE3280.

L’exemple ci-dessous montre que la couleur d’arrière-plan de l’en-tête devient transparente à 50% lorsque nous ajoutons 80 à la fin du code hexadécimal.

Exemple de code :

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #A5BE3280
}