Question Opacité de fond CSS [dupliquer]

Vous pouvez utiliser CSS 3 :before avoir un fond semi-transparent et vous pouvez le faire avec un seul conteneur. Utilisez quelque chose comme ça

<article>
  Text.
</article>

Ensuite, appliquez 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);
}

Échantillon: http://codepen.io/anon/pen/avdsi

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

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

1. Méthode de transparence CSS Aplha (ne fonctionne pas dans IE 8)

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

2. Utilisez une image png transparente selon votre choix comme arrière-plan.

3. Utilisez l'extrait de code CSS ci-dessous pour créer un arrière-plan transparent pour plusieurs pages. 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 concernant cette technique, voir ce, qui a un générateur de CSS en ligne.

Je ferais quelque chose comme ça

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS:

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

Devrait marcher. C'est supposer que vous devez avoir une image semi-transparente btw, et pas une couleur (que vous devriez utiliser rgba pour). Aussi supposé est que vous ne pouvez pas simplement modifier l'opacité de l'image à l'avance dans Photoshop.

.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}

Vous pouvez utiliser sass transparentize, Je l'ai trouvé le plus utile et le plus simple à utiliser.

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6) 

Voir plus: http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method

C'est parce que le div interne a 100% de l'opacité du div où il est imbriqué (qui a 40% d'opacité).

Pour le contourner, il y a quelques choses que vous pourriez faire.

vous pourriez créer deux divs distincts comme ça:

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

définissez l'opacité css et les autres propriétés souhaitées pour l'arrière-plan hte et utilisez la propriété z-index (z-index) pour styliser et positionner la div bContent. Avec cela, vous pouvez placer l'overtope div de l'arrière-plan div sans avoir l'opacité mucked avec.

Une autre option est de RGBa. Cela vous permettra d'imbriquer vos divs tout en obtenant une opacité spécifique à div.

La dernière option consiste simplement à faire une image .png semi-transparente de la couleur que vous voulez dans l'éditeur d'image de votre choix, à définir la propriété background-image sur l'url de l'image et vous n'aurez plus à vous soucier de avec le CSS et perdre la capacité et l'organisation d'une structure div imbriquée.