Posso atribuir a propriedade "capacidade" apenas à propriedade "fundo" de um "div" e não ao texto nele contido?
I'já tentei:
background: #CCC;
opacity: 0.6;
mas isto não'não muda a opacidade.
Parece que você quer utilizar um fundo transparente, neste caso você poderia tentar utilizar a função rgba()
:
rgba(R, G, B, A)
R (vermelho), G (verde) e B (azul) podem ser ou
<integer>
s ou<percentagem>
s, onde o número 255 corresponde a 100%. A (alfa) pode ser um<número>
entre 0 e 1, ou um<porcentagem>
, onde o número 1 corresponde a 100% (opacidade total).
Exemplo RGBa
rgba(51, 170, 51, .1) / 10% verde opaco / rgba(51, 170, 51, .4) / 40% verde opaco / rgba(51, 170, 51, .7) / 70% verde opaco / rgba(51, 170, 51, 1) / verde opaco /
Um pequeno [exemplo][2] mostrando como o rgba
pode ser utilizado.
A partir de 2018, praticamente todos os navegadores suportam a sintaxe rgba
.
A maneira mais fácil de fazer isto é com 2 mergulhos, 1 com o fundo 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>
Não podes. Você tem que ter um mergulho separado que seja apenas esse fundo, para que você só possa aplicar a opacidade a isso.
Eu tentei fazer isso recentemente, e como eu já estava usando jQuery, achei o seguinte o menos incômodo:
texto
div uma cor de fundo sólida, porque esse será o padrão JavaScript-less.texto
div, e aplique-a ao fundo
div.Tenho certeza que há algum tipo de maneira ninja do CSS de fazer tudo isso apenas com flutuadores ou algo assim, mas eu não tive paciência para descobrir isso.