web-dev-qa-db-fra.com

Comment rendre la couleur de fond d'un div translucide?

Je veux seulement que la couleur de fond du blanc dans mon div soit translucide à environ 50%. Le contenu doit être entièrement opaque. Quelle est la bonne façon de procéder? J'ai imaginé quand j'ai recherché la propriété CSS d'arrière-plan , je trouverais un paramètre d'opacité, mais je ne l'ai pas fait. Ne vous souciez pas d'IE6.

[~ # ~] update [~ # ~]: résolution avec la solution rgba donnée ci-dessous en conjonction avec - La solution de CSS3PIE pour faire fonctionner rgba dans IE navigateurs .

csscss3opacity
30
at.

Si vous souhaitez une opacité multi-navigateur, vous pouvez gérer chacun d'eux dans votre définition CSS

div
{
    opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
    filter: alpha(opacity=50); /* IE lt 8 */
    -ms-filter: "alpha(opacity=50)"; /* IE 8 */
    -khtml-opacity: .50; /* Safari 1.x */
    -moz-opacity: .50; /* FF lt 1.5, Netscape */
}
16
hunter

Le moyen le plus simple est de créer un PNG semi-transparent et de l'utiliser comme image d'arrière-plan pour la div.

Si vous utilisez Photoshop (ou des outils similaires), créez simplement une image de 10 x 10 pixels entièrement blanche, puis faites glisser le curseur d'opacité jusqu'à 50%. Enregistrez-le au format PNG et vous devriez être rockin '!

L'utilisation de RGBA est également une possibilité, mais vous ne perdez pas seulement IE6 - il y a encore pas mal de personnes utilisant des navigateurs qui ne prennent pas en charge le schéma alpha.

4
minichate

Il existe une propriété CSS appelée backdrop-filter fournissant une réelle translucidité (par opposition à la transparence, qui est déjà disponible en CSS).

Actuellement pris en charge uniquement par Safari, mais il peut être ajouté à d'autres navigateurs.

.my-selector {
   backdrop-filter: blur(5px);
}
2
sandstrom