Opacidade de fundo do CSS [duplicado]

Pode usar o CSS 3 :before para ter um fundo semi-transparente e pode fazê-lo apenas com um contentor. Use algo assim

<article>
  Text.
</article>

Depois aplicar algum 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);
}

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

Nota: poderá ser necessário ajustar os valores de z-index.

Os seguintes métodos podem ser usados para resolver o seu problema

1. Método de transparência do CSS Aplha (não funciona no IE 8)

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

2. Use uma imagem png transparente de acordo com a sua escolha como fundo.

3. Use o seguinte excerto de código css para criar um fundo transparente Alfa-navegador cruzado. Aqui está um exemplo com #000000 @ 0, 4% opacity

   .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;  
   }
   

Para mais detalhes sobre esta técnica, Ver Este , que tem um gerador de css online.

<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;
}

Deve funcionar. Isto assume que você é obrigado a ter uma imagem semi-transparente btw, e não uma cor (que você deve apenas usar rgba para). Também assumiu que você não pode apenas alterar a opacidade da imagem de antemão no 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)";}

Pode usar o sass transparentize, achei que era a mais útil e simples de usar.

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) 

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

Isto é porque o div interno tem 100% da opacidade do div em que está aninhado (que tem 40% de opacidade).

Você poderia criar duas divas separadas assim:

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

Defina a opacidade CSS desejada e outras propriedades para o fundo hte e utilize a propriedade z-index (z-index) para estilo e posição do div.bContent. Com isso você pode colocar o div sobretopo do div de fundo sem ter a opacidade estragada.

Outra opção é RGBa . Isso permitirá que você aninhe suas divs e ainda alcançar a opacidade específica div.

A última opção é simplesmente tornar um semi-transparente .Imagem png da cor que você deseja no seu editor de imagem desejado de escolha, Defina a propriedade de fundo-imagem para o url da imagem e, em seguida, você não terá que se preocupar com o mucking com o css e perder a capacidade e Organização de um mergulhado aninhado estrutura.

Certifique-se apenas de colocar largura e altura para o primeiro plano o mesmo com o fundo, ou tentar ter propriedades de cima, baixo, esquerda e direita.

<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>