tag - tooltip html5




Opacidade de fundo do CSS (6)

Esta questão já tem uma resposta aqui:

Eu estou usando algo semelhante ao seguinte código:

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

Eu esperava que isso fizesse o background ter uma opacidade de 0,4 e o texto tivesse 100% de opacidade. Em vez disso, ambos têm uma opacidade de 0,4.


Apenas certifique-se de colocar a largura e a altura para o primeiro plano da mesma maneira com o plano de fundo ou tente ter as propriedades superior, inferior, 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>

As crianças herdam a opacidade. Seria estranho e inconveniente se não o fizessem.

Você pode usar um PNG translúcido para sua imagem de plano de fundo ou usar uma cor RGBa (a para alfa) para a cor do plano de fundo.

Exemplo, 50% de fundo preto desbotado:

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


Isso ocorre porque o div interno tem 100% da opacidade do div que está aninhado (que tem 40% de opacidade).

Para contorná-lo, há algumas coisas que você poderia fazer.

você poderia criar dois divs separados assim:

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

defina sua opacidade css desejada e outras propriedades para o segundo plano e utilize a propriedade z-index ( z-index ) para estilizar e posicionar o bContent div. Com isso você pode colocar o overtope div do fundo div sem ter sua opacidade mucked com.

Outra opção é para o RGBa . Isso permitirá que você aninhe seus divs e ainda obterá opacidade específica de div.

A última opção é simplesmente criar uma imagem .png semitransparente da cor desejada no editor de imagens desejado, definir a propriedade background-image como a URL da imagem e não precisar se preocupar em ignorar com o css e perdendo a capacidade e organização de uma estrutura div aninhada.


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

  1. CSS Alpha Transparency Method (não funciona no IE 8)

    #div{background-color:rgba(255,0,0,0.5);}
  2. Use uma imagem Transparente png de acordo com sua escolha como fundo.

  3. Use o seguinte snippet de código css para criar um plano de fundo transparente em alfa entre navegadores. Aqui está um exemplo com a opacidade #000000 @ 0,4%

    .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 essa técnica, veja this , que possui um gerador CSS online.



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




opacity