Impostare l'opacità al menu, ma mantenere opaca testo in CSS

Question

Come posso creare un menu che solo il suo sfondo è trasparente? Il testo dovrebbe tenere opaco (opacità: 1)

Se ho impostato

li:hover {
    opacity: 0.5
}

L'elemento della lista intera diventa trasparente. Come posso risolvere il problema?

Answer 1

C'è un nuovo valore nel CSS3 chiamata "RGBA" che permette di utilizzare un colore trasparente come un colore di sfondo. Per esempio:

li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

Sono abbastanza sicuro che dovrebbe funzionare, anche se ho appena scritto il codice sul posto in modo che non può. Ciò, tuttavia, date il vostro menu di una sfumatura bianco-ish ad esso. Se volete saperne di più su RGBA, però, andate qui: http: // css-trucchi. com / RGBA browser-support /

Answer 2

Sarà necessario utilizzare un'immagine PNG trasparente, o un rgba valore di colore , per lo sfondo del <li>, ad esempio:

li:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

o

li:hover {
    background: url(a-nice-semi-transparent-png-image.png);

    /* Supplying just the image file here will make the browser repeat the image
    file vertically and horizontally, thus taking up all the space, just like a 
    colour would */
}

Answer 3

Non credo, che è possibile, provare questo esempio: http://jsfiddle.net/578SV/

Answer 4

Non è possibile. Il livello di trasparenza viene tramandata a tutti gli elementi figlio.

Le opzioni disponibili:

• Collocare un altro elemento in cima alla li, possibilmente utilizzando position: absolute, che ha un'impostazione di opacità normale

• Usa un file PNG con trasparenza alfa per creare l'effetto di opacità (Avrà bisogno di soluzioni alternative al lavoro in IE6)

• Utilizzare la nuova proprietà di colore rgba come mostrato dal @hatkirby, se si può vivere con il supporto del browser incompleta