Opacidade CSS apenas para a cor de fundo e não para o texto?

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.

Parece que você quer usar um fundo transparente, caso em que você poderia tentar usar a function rgba() :

rgba(R, G, B, A)

R (vermelho), G (verde) e B (azul) podem ser s ou s, onde o número 255 corresponde a 100%. A (alfa) pode ser um entre 0 e 1, ou , em que 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 exemplo mostrando como o rgba pode ser usado.

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

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

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 todo o contêiner 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

Apenas para usuários MENOS :

Se você não gosta de definir suas colors usando RGBA, mas 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 function LESS integrada também oferece:

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

Veja como converter colors HEX para rgba com menos compilador?

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

Eu tive o mesmo problema. Eu quero 100% de cor de fundo transparente, basta usar esse código, funcionou muito bem para mim:

 rgba(54, 25, 25, .00004); 

Você pode ver exemplos no lado esquerdo desta página da web (a área do formulário de contato)

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

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

em seguida, defina as seguintes propriedades css:

  .supersizer { background: url("http://sofpt.miximages.com/opacity/stackoverflow_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; } 
 

Para qualquer um que se deparar com este tópico, aqui está um script chamado thatsNotYoChild.js que acabei de escrever e resolve esse problema automaticamente:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Basicamente, ele separa os filhos do elemento pai, mas mantém o elemento no mesmo local físico na página.

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 z-index , em seguida, ajuste a posição do conteúdo para ajustá-lo ao fundo transparente. Desta forma, você não terá problemas com posicionamento absoluto.

usar

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

Este método funcionará em todos os navegadores

Você não pode. Você tem que ter um div separado que é apenas esse plano de fundo, de modo que você só pode aplicar a opacidade a isso.

Eu tentei fazer isso recentemente, e desde que eu já estava usando o jQuery, eu encontrei o seguinte para ser o menos incômodo:

  1. Crie os dois divs diferentes. Eles serão irmãos, não contidos um no outro nem nada.
  2. Dê ao text div uma cor de fundo sólida, porque esse será o padrão JS-less.
  3. Use jQuery para obter a altura da div do text e aplique-a ao div do background .

Tenho certeza de que há algum tipo de maneira ninja CSS de fazer tudo isso com apenas carros alegóricos ou algo assim, mas eu não tive paciência para descobrir isso.