web-dev-qa-db-fra.com

Comment conserver l'opacité du texte 100 lorsque le conteneur parent a une opacité de 50

J'ai une liste div qui a une opacité réglée à 50 et à l'intérieur de cette div, je veux afficher du texte avec une opacité de 100,

Voici ce que je veux dire:

<div id="outer">
  <div id="inner">
    Text
  </div>
</div>

Le CSS serait:

#outer {
  opacity: 0.5;
}

#inner {
  opacity: 1.0;
}

J'ai essayé ça, mais ça ne marche pas.

s'il vous plaît aider

Cordialement

csshtmlopacity
25
Moksha

Une solution simple et compatible consiste à supprimer toutes vos opacity et à utiliser:

#outer {
    background: url(50%-transparent-white.png);
    background: rgba(255,255,255,0.5)
}
  • Les navigateurs prenant en charge rgba utiliseront la deuxième déclaration background avec rgba.
  • Les navigateurs qui ne le font pas ignorent la deuxième déclaration background et utilisent le .png.

Le .png ne fonctionnera pas dans IE6, mais c'est peu probable être un problem. Si c'est le cas, il peut être résolu .

Encore une autre méthode est détaillée ici:

_ { http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

18
thirtydot

Pour ce faire, il existe deux méthodes: l'une consiste simplement à définir la couleur d'arrière-plan du conteneur sur une couleur transparente, avec rgba(r,g,b,.5); toutefois, il s'agit de CSS3 et n'est prise en charge que par les nouveaux navigateurs.

L’autre façon de faire consiste à déposer un div en position absolue à l’intérieur du conteneur, avec une opacité de 0,5.

<div class="backgroundOpacity">
    My Epic Content
</div>
<br/>
<div class="backgroundDiv">
    <div id="background"> </div>
    My Other Epic Content
</div>
.backgroundOpacity {
 background-color:rgba(0,0,0,.5);
}
.backgroundDiv {
  position:relative;  
}
#background {
 position:absolute;
  top:0;
   left:0;
   width:100%;
   height:100%;
   background-color:#000;
   opacity: .5; 
}

http://jsfiddle.net/thomas4g/vVt8D/1/

12
Thomas Shields
background-color: rgba(0,0,0,0.5);
4
Hello World

Vous pouvez définir votre div externe comme ceci

background-color: rgba(0, 0, 0, 0.8); opacity: inherit;

2
i4snow

Cela peut être fait par un truc et c'est tellement facile, voici comment:

vous voulez prendre le texte en dehors de la division transparente et c'est en faisant une autre division assi en tant que position: relative; 

0
Hadi