Colore di sfondo CSS trasparente

Voglio far scomparire lo sfondo del menu elenco utilizzando l'opacità, senza alterare il carattere. È possibile con CSS3?

ora puoi usare rgba nelle proprietà CSS in questo modo:

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

0,5 è la trasparenza , modifica i valori in base al tuo design.

Demo dal vivo http://jsfiddle.net/EeAaB/

maggiori informazioni http://css-tricks.com/rgba-browser-support/

Tieni a mente queste tre opzioni (vuoi # 3):

1) L'intero elemento è trasparente:

visibility: hidden;

2) L'intero elemento è in qualche modo trasparente:

opacity: 0.0 - 1.0;

3) Solo lo sfondo dell'elemento è trasparente:

background-color: transparent;

sì, è possibile. usa semplicemente la sintassi rgba per il colore di sfondo.

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

Ecco una classe di esempio che utilizza i colori con nome CSS:

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

Questo aggiunge uno sfondo opaco al 25% (colorato) e trasparente al 75%.

CAVEAT Sfortunatamente, l'opacità influenzerà l' intero elemento a cui è collegato.
Quindi, se hai del testo in quell'elemento, imposterà anche il testo al 25% di opacità. :-(

Il modo per superare questo problema è usare rgbaohsla metodi per indicare la trasparenza come parte del "colore" di sfondo desiderato. Ciò ti consente di specificare la trasparenza dello sfondo, indipendentemente dalla trasparenza degli altri elementi nel tuo elemento.

Ecco 3 modi per impostare uno sfondo blu al 75% di trasparenza, senza influire sugli altri elementi:

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

In questo caso background-color:rgba(0,0,0,0.5);è il modo migliore. Per esempio:background-color:rgba(0,0,0,opacity option);

Per ottenerlo, devi modificare background-coloril valore dell'elemento.

Modi per creare un colore (semi) trasparente:

• Il nome del colore CSS transparentcrea un colore completamente trasparente.

  Utilizzo:

    .transparent{
      background-color: transparent;
    }
  

• Utilizzo delle funzioni rgbao hslacolor, che consentono di aggiungere il canale alfa (opacità) alle funzioni rgbe hsl. I loro valori alfa vanno da 0 a 1.

  Utilizzo:

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

• Oltre alle soluzioni già citate, puoi anche utilizzare il formato HEX con valore alfa ( #RRGGBBAAo #RGBAnotazione ).

  È abbastanza nuovo (contenuto dal CSS Color Module Level 4), ma già implementato nei browser più grandi (scusate, no IE).

  Questo differisce dalle altre soluzioni, poiché tratta anche il canale alfa (opacità) come un valore esadecimale, facendolo variare da 0 a 255 ( FF).

  Utilizzo:

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

Puoi provarli anche:

• 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>

Prova questo:

opacity:0;

Per IE8 e versioni precedenti

filter:Alpha(opacity=0); 

Opacity Demo di W3Schools

Sì, puoi solo testo normale come

.someDive{
    background:transparent 
}