Comment rendre l'arrière-plan opaque en CSS

Dans la conception Web, la couleur ou le motif d'arrière-plan sont des éléments très importants. Cependant, vous souhaiterez parfois rendre la couleur ou le motif d'arrière-plan transparent afin que d'autres éléments puissent apparaître. Cela nécessite l'utilisation de la technologie d'opacité d'arrière-plan CSS.

Méthode d'implémentation

Il existe de nombreuses façons d'implémenter l'opacité d'arrière-plan CSS :

1. Utiliser les valeurs de couleur au format RGBA

Les valeurs de couleur au format RGBA contiennent quatre attributs : la valeur rouge (0-255), valeur verte (0-255), valeur bleue (0-255) et transparence (0-1). En définissant la propriété de transparence, vous pouvez rendre la couleur ou le motif d'arrière-plan opaque.

Par exemple :

background-color: rgba(255, 255, 255, 0.5);

Cette règle de style ajoutera un fond blanc translucide à la page.

2. Utilisez l'attribut opacity

En CSS3, nous pouvons utiliser l'attribut opacity pour définir la transparence d'un élément. Cette propriété accepte une valeur comprise entre 0 et 1, la valeur par défaut étant 1, ce qui signifie une opacité totale. 0,5 représente 50 % d'opacité.

Par exemple :

couleur de fond : noir ;
opacité : 0,5 ;

Cette règle de style ajoutera un fond noir semi-transparent à la page.

3. Utiliser les propriétés background-color et background-image

Nous pouvons également utiliser les propriétés background-color et background-image en même temps pour obtenir l'opacité de l'arrière-plan. Cette méthode nécessite que l’image soit d’abord transformée en une image PNG transparente.

Par exemple :

background-color: #000;
background-image: url(images/transparent-background.png);

Cette règle de style ajoutera une image d'arrière-plan noire translucide à la page.

Scénarios d'application

L'opacité d'arrière-plan CSS est une technique très puissante qui peut être utilisée pour obtenir une variété d'effets.

1. Informations sur l'invite de survol

Lorsque la souris se déplace sur un lien ou un bouton, nous devons généralement faire apparaître une boîte de dialogue, ce qui peut être obtenu en utilisant un arrière-plan translucide.

Par exemple :

.tooltip-wrapper {

position: relative;

}

.tooltip {

position: absolute;
top: 100%;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
display: none;

}

.tooltip-wrapper:hover .tooltip {

display: block;

}

Cette règle de style sera affichée lorsque le la souris est survolée Lorsque l'élément .tooltip-wrapper est activé, une boîte d'info-bulle noire translucide s'affiche.

2. Effet de fondu d'entrée et de disparition du graphique carrousel

Le graphique de carrousel est un élément de conception Web très populaire, et l'effet de fondu d'entrée et de sortie est l'un des effets de base, qui peut être obtenu à l'aide d'un semi- -arrière-plan transparent et attribut d'opacité.

Par exemple :

.banner {

position: relative;

}

.banner img {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;

}

.banner img.active {

opacity: 1;

}

.banner .background {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);

}

Ceci style La règle ajoutera un fond noir translucide et un effet de fondu au carrousel sur la page.

Résumé

L'opacité d'arrière-plan CSS est une technologie très utile qui peut être utilisée pour obtenir une variété d'effets, tels que des informations d'invite flottantes et des effets de fondu de carrousel. Essayez cette technique lorsque vous devez rendre une couleur ou un motif d’arrière-plan transparent afin que d’autres éléments puissent apparaître.

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!