Opacité de fond CSS [dupliquer]

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

<article>
  Text.
</article>

puis appliquer quelques 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

Note: vous pourriez avoir besoin d'ajuster les valeurs z-index .

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. utilisez une image png transparente selon votre choix comme fond.

3. utilisez l'extrait de code css suivant pour créer un fond alpha-transparent de navigateur croisé. Voici un exemple avec #000000 @ 0.4% opacité

   .div {  
       background:rgb(0,0,0);  
       background: transparent;  
       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 ce , qui a un générateur 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 en supposant que vous êtes tenus d'avoir une image semi-transparente btw, et non une couleur (que vous devriez utiliser rgba). On suppose aussi que l'on ne peut pas 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é pour être le plus utile et simple de l'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 l'intérieur de la div à 100% de l'opacité de la div c'est imbriquée (qui a 40% d'opacité).

pour la contourner, il y a quelques choses que vous pourriez faire.

vous pouvez créer deux divs séparés comme cela:

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

définissez votre opacité CSS désirée et d'autres propriétés pour l'arrière-plan hte et utilisez la propriété z-index ( z-index ) pour styliser et positionner le bContent div. Avec cela, vous pouvez placer le div overtope de la div de fond sans avoir son opacité mucked avec.

une autre option est de RGBa . Cela vous permettra d'emboîter vos divs et d'atteindre tout de même l'opacité spécifique de div.

la dernière option est de simplement faire un semi transparent .png image de la couleur que vous voulez dans votre éditeur d'image désiré de choix, 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.

il suffit de s'assurer de mettre la largeur et la hauteur pour le premier plan le même avec l'arrière-plan, ou essayer d'avoir des propriétés haut, bas, gauche et droite.

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>