web-dev-qa-db-fra.com

L'opacité CSS concerne uniquement la couleur de fond, pas le texte dessus?

Puis-je attribuer la propriété opacity à la propriété background d'un div uniquement et non au texte qu'elle contient?

J'ai essayé:

background: #CCC;
opacity: 0.6;

mais cela ne change pas l'opacité.

cssopacity
761
Jay

Il semble que vous souhaitiez utiliser un arrière-plan transparent. Dans ce cas, vous pouvez utiliser la fonction rgba() :

rgba(R, G, B, A)

R (rouge), G (vert) et B (bleu) peuvent être <integer>s ou <percentage>s, le nombre 255 correspondant à 100%. A (alpha) peut être un <number> compris entre 0 et 1, ou un <percentage>, où le nombre 1 correspond à 100% (opacité totale).

Exemple RGBa

rgba(51, 170, 51, .1)    /*  10% opaque green */ 
rgba(51, 170, 51, .4)    /*  40% opaque green */ 
rgba(51, 170, 51, .7)    /*  70% opaque green */ 
rgba(51, 170, 51,  1)    /* full opaque green */

Un petit exemple montrant comment rgba peut être utilisé.

Depuis 2018, pratiquement , chaque navigateur prend en charge la syntaxe rgba .

1316
Tim Cooper

La façon la plus simple de procéder consiste à utiliser 2 divs, 1 avec l'arrière-plan et 1 avec le texte:

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>
74
Kostas

Pour Moins utilisateurs uniquement:

Si vous n'aimez pas définir vos couleurs avec RGBA, mais plutôt avec HEX, il existe des solutions.

Vous pouvez utiliser un mixin comme:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

Et utilisez-le comme:

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

En fait, c’est ce que = fonction intégrée fournit également:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

Voir Comment convertir une couleur hexadécimale en rgba avec le compilateur Less?

21
Sebastien Lorber

Cela fonctionnera avec tous les navigateurs

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

Si vous ne souhaitez pas que la transparence affecte l'ensemble du conteneur et ses enfants, vérifiez cette solution de contournement. Vous devez avoir un enfant en position absolue avec un parent en position relative pour y parvenir. Opacité CSS n’affectant pas les éléments enfants

Vérifiez une démonstration qui fonctionne à ne opacité de CSS qui n’affecte pas les "enfants"

15
Hussein

Mon astuce consiste à créer un fichier .png transparent avec la couleur et à utiliser background:url().

12
user1542894

J'ai eu le même problème. Je veux une couleur de fond 100% transparente. Utilisez simplement ce code; ça a très bien fonctionné pour moi:

rgba(54, 25, 25, .00004);

Vous pouvez voir des exemples sur le côté gauche de cette page Web (la zone du formulaire de contact).

8
user2178930

Une excellente façon de faire serait d’utiliser CSS 3.

Créez une largeur div d'une classe - par exemple. supersizer en haut de votre page:

Puis définissez les propriétés CSS suivantes:

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }
<div class="supersizer"></div>
5
Wolfgang Zotter

Pour ceux qui découvrent ce sujet, voici le script thatsNotYoChild.js que je viens d'écrire et qui résout ce problème automatiquement:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Fondamentalement, il sépare les enfants de l'élément parent, mais conserve l'élément au même emplacement physique sur la page.

2
Louis L.

La solution la plus simple consiste à créer 3 divs. Celui qui contiendra les 2 autres, celui avec un fond transparent et celui avec un contenu. Faites en sorte que la position de la première div soit relative et définissez celle avec un arrière-plan transparent comme négative z-index, puis ajustez la position du contenu pour qu’elle s’adapte à l’arrière-plan transparent. De cette façon, vous n'aurez pas de problèmes de positionnement absolu.

1
Balsa