Fond de CSS Opacity

Question

J'en utilisant quelque chose de similaire pour le code suivant:

<div style="opacity:0.4; background-image:url(...);">
 <div style="opacity:1.0;">
  Text
 </div>
</div>

J'ai attendu à ce que l'arrière-plan ont une opacité de 0.4 et le texte, d'avoir 100% d'opacité. Au lieu de cela ils ont tous les deux une opacité de 0.4.

S'il vous plaît aider.

Answer 1

Les enfants héritent de l'opacité. Ce serait bizarre et gênant si ils n'ont pas.

Vous pouvez utiliser un translucide, le format png pour votre image de fond, ou d'utiliser un RGBa (un pour l'alpha) de couleur pour la couleur de fond.

Exemple, 50% noir délavé arrière-plan:

<div style="background-color:rgba(0, 0, 0, 0.5)">
   <div>
      Text
   </div>
</div>

Answer 2

Vous pouvez utiliser les CSS 3 :before d'avoir un fond semi-transparent et vous pouvez le faire avec un seul conteneur. Utiliser quelque chose comme ceci

<article>
  Text.
</article>

Appliquez ensuite un peu de CSS

article {
  position: relative;
  z-index: 1;
}

article:before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

Exemple: http://codepen.io/anon/pen/avdsi

Remarque: Vous devrez peut-être ajuster l' z-index valeurs.

Answer 3

Les méthodes suivantes peuvent être utilisées pour résoudre votre problème

1. CSS Aplha Méthode par Transparence (ne fonctionne pas sous IE 8)

   #div{background-color:rgba(255,0,0,0.5);}
   

2. Utiliser une image au format png Transparent en fonction de votre choix en fond.

3. Utilisez le code css suivant extrait de code pour créer un cross-browser alpha-fond transparent. Voici un exemple avec #000000 @ 0.4% d'opacité

   .div {  
       background:rgb(0,0,0);  
       background: transparent\9;  
       background:rgba(0,0,0,0.4);  
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  
       zoom: 1;  
   }    
   .div:nth-child(n) {  
       filter: none;  
   }
   

Pour plus de détails sur cette technique, voir cequi est en ligne générateur de css.

Answer 4

Je voudrais faire quelque chose comme ceci

<div id="container">
  <div id="text">
    <p>text yay!</p>
  </div>
  <div id="bgd"></div>
</div>

CSS:

#container{
    position:relative;
}

#bgd{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-image:(something.png);
    opacity:.4;
}

Devrait fonctionner. Pas le plus élégant, cependant. C'est en supposant que vous êtes tenus d'avoir une image semi-transparente btw, et non une couleur (que vous devriez utiliser rgba). Également l'hypothèse est que vous ne pouvez pas modifier l'opacité de l'image au préalable dans photoshop.

Answer 5

C'est parce que l'intérieur de la div à 100% de l'opacité de la div c'est imbriquée (qui a 40% d'opacité).

Pour contourner cela, il ya quelques choses que vous pourriez faire.

vous pouvez créer deux divs de la sorte:

<div id="background"></div>
<div id="bContent"></div>

définissez les css d'opacité et d'autres propriétés dans le fond et utiliser la propriété z-index (z-index) pour le style et la position de la bContent div. Avec cela, vous pouvez placer le div overtope de l'arrière-plan div sans avoir l'opacité sali avec.

---

Une autre option est de RGBa. Cela vous permettra de nest votre divs et encore atteindre div spécifique de l'opacité.

---

La dernière option est de simplement faire un semi transparent .png image de la couleur que vous voulez dans votre choix de l'image de l'éditeur de choix, définissez la propriété background-image à l'url de l'image, puis vous n'aurez pas à vous soucier de coucher avec le css et de perdre la capacité et l'organisation d'un imbriquée div structure.