uma - transparencia imagens css




Opacidade CSS apenas para cor de fundo e não o texto nele? (8)

Esta questão já tem uma resposta aqui:

Posso atribuir a propriedade de opacity à propriedade background de uma div apenas e não ao texto nela?

Eu tentei:

background: #CCC;
opacity: 0.6;

mas isso não altera a opacidade.


A maneira mais fácil de fazer isso é com 2 divs, 1 com o segundo plano e 1 com o texto:

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>


A solução mais fácil é criar 3 divs . Um que contenha os outros 2, aquele com fundo transparente e aquele com conteúdo. Torne a posição da primeira div relativa e defina aquela com fundo transparente para z-index negativo, depois ajuste a posição do conteúdo para ajustá-lo ao fundo transparente. Desta forma, você não terá problemas com posicionamento absoluto.


Isso funcionará com todos os navegadores

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:”alpha(opacity=50)”;
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

Se você não quiser que a transparência afete o contêiner inteiro e seus filhos, verifique esta solução alternativa. Você deve ter um filho absolutamente posicionado com um pai relativamente posicionado para conseguir isso. http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Verifique a demonstração de trabalho em http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html


Meu truque é criar um .png transparente com a cor e usar background:url() .


Parece que você quer usar um fundo transparente, caso em que você poderia tentar usar a função rgba() :

rgba(R, G, B, A)

R (vermelho), G (verde) e B (azul) podem ser <integer> s ou <percentage> s, onde o número 255 corresponde a 100%. Um (alfa) pode ser um <number> entre 0 e 1, ou um <percentage> , onde o número 1 corresponde a 100% (opacidade total).

Exemplo RGBa

rgba(51, 170, 51, .1)    /*  10% opaque green */ 
rgba(51, 170, 51, .4)    /*  40% opaque green */ 
rgba(51, 170, 51, .7)    /*  70% opaque green */ 
rgba(51, 170, 51,  1)    /* full opaque green */ 

Um pequeno example mostrando como o rgba pode ser usado.

A partir de 2018, praticamente todos os navegadores suportam a sintaxe do rgba .


Uma ótima maneira de fazer isso seria usar o css3 de fato.

Crie uma div width de uma classe - por exemplo, supersizer no topo da sua página:

em seguida, defina as seguintes propriedades css:

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }
<div class="supersizer"></div>


usar

background:url("location of image");//use an image with opacity

Este método funcionará em todos os navegadores


Apenas para usuários MENOS :

Se você não gosta de definir suas cores usando RGBA, mas sim usando HEX, existem soluções.

Você poderia usar um mixin como:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

E usá-lo como

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

Na verdade, isso é o que uma função LESS integrada também oferece:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

Veja como converter cores hex para rgba com menos compilador?





opacity