Cor de fundo CSS transparente

Quero fazer o fundo do menu de lista desaparecer usando opacidade, sem afetar a fonte. É possível com CSS3?

agora você pode usar rgba em propriedades CSS como este:

.class {
    background: rgba(0,0,0,0.5);
}

0,5 é a transparência , altere os valores de acordo com seu projeto.

Demonstração ao vivo http://jsfiddle.net/EeAaB/

mais informações http://css-tricks.com/rgba-browser-support/

Mantenha estas três opções em mente (você deseja o nº 3):

1) Todo o elemento é transparente:

visibility: hidden;

2) Todo o elemento é um tanto transparente:

opacity: 0.0 - 1.0;

3) Apenas o fundo do elemento é transparente:

background-color: transparent;

sim, isso é possível. apenas use a sintaxe rgba para sua cor de fundo.

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}

Aqui está um exemplo de classe usando cores nomeadas em CSS:

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

Isso adiciona um fundo que é 25% opaco (colorido) e 75% transparente.

CAVEAT Infelizmente, a opacidade afetará todo o elemento ao qual está anexado.
Portanto, se você tiver texto nesse elemento, ele também definirá o texto para 25% de opacidade. :-(

A maneira de superar isso é usar os métodos rgbaou hslapara indicar a transparência como parte da "cor" de fundo desejada. Isso permite que você especifique a transparência do fundo, independente da transparência dos outros itens em seu elemento.

Aqui estão três maneiras de definir um fundo azul com transparência de 75%, sem afetar outros elementos:

• background: rgba(0%, 0%, 100%, 0.75)
• background: rgba(0, 0, 255, 0.75)
• background: hsla(240, 100%, 50%, 0.75)

Nesse caso, background-color:rgba(0,0,0,0.5);é a melhor maneira. Por exemplo:background-color:rgba(0,0,0,opacity option);

Para alcançá-lo, você deve modificar o background-colordo elemento.

Maneiras de criar uma cor (semi-) transparente:

• O nome da cor CSS transparentcria uma cor completamente transparente.

  Uso:

    .transparent{
      background-color: transparent;
    }
  

• Usando as funções rgbaou de hslacor, que permitem adicionar o canal alfa (opacidade) às funções rgbe hsl. Seus valores alfa variam de 0 a 1.

  Uso:

    .semi-transparent-yellow{
      background-color: rgba(255, 255, 0, 0.5);
    }
    .transparent{
      background-color:  hsla(0, 0%, 0%, 0);
    }
  

• Além das soluções já mencionadas, você também pode usar o formato HEX com valor alfa ( #RRGGBBAAou #RGBAnotação ).

  Isso é muito novo (contido no Módulo de Cores CSS Nível 4), mas já implementado em navegadores maiores (desculpe, sem IE).

  Isso difere das outras soluções, pois trata o canal alfa (opacidade) como um valor hexadecimal também, variando de 0 a 255 ( FF).

  Uso:

    .semi-transparent-yellow{
      background-color: #FFFF0080;
    }
    .transparent{
      background-color: #0000;
    }
  

Você também pode experimentá-los:

• transparent:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: transparent;
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `transparent`
</div>

• rgba():

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: rgba(0, 255, 0, 0.3);
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `rgba()`
</div>

• #RRGGBBAA:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: #FF000060
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `#RRGGBBAA`
</div>

Experimente isto:

opacity:0;

Para IE8 e anteriores

filter:Alpha(opacity=0); 

Demonstração de opacidade de W3Schools

Sim, você pode apenas texto simples como

.someDive{
    background:transparent 
}