Posso colocar imagem de fundo e opacidade na mesma propriedade?

Posso ver em referências CSS como definir a transparência da imagem e como definir uma imagem de fundo. Mas como eu posso combinar estes dois para definir uma imagem de fundo transparente?

Eu tenho uma imagem que I'gostaria de usar como fundo, mas é muito brilhante - I'gostaria de reduzir a opacidade para cerca de 0.2. Como eu posso fazer isso?

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}
TylerH
Pergunta editada :em
Programação
css
15º novembro 2010 в 11:37
1 vista
#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}
Nisse Engström
Resposta editada :em
Comentários (11)
Solução

Dois métodos:

  1. Converter para PNG e fazer a imagem original 0,2 opacidade
  2. (Método melhor) tem um <div> que é posição: absoluta; antes de #main e a mesma altura que #main, então aplique a imagem de fundo e opacidade: 0.2; filtro: alpha(opacity=20);.
TylerH
Resposta editada :em
Comentários (4)

Bem, a única maneira do CSS de fazer apenas transparência de fundo é via RGBa mas como você quer utilizar uma imagem eu sugeriria utilizar o Photoshop ou o Gimp para tornar a imagem transparente e depois utilizá-la como fundo.

Comentários (2)