Quando il Web designer ha cominciato usando codice di foglio di stile CSS, hanno usato per impostare i tipi di carattere e colori di interi siti Web per evitare di modificare ogni file HTML. Dal circa 2008, Web designer ora utilizzare i CSS per evitare anche aprendo i loro programmi di grafica. Per aggiungere sfondi semi-trasparenti a qualsiasi contenuto in una pagina Web, ad esempio, è possibile utilizzare CSS puro. In passato, ciò ha richiesto la creazione di un file PNG e quindi aggiungendo un PNG fix per Internet Explorer 6. Versioni di Internet Explorer 8 e sotto ancora bisogno un ripiego, ma è possibile aggiungerlo utilizzando un filtro.

Istruzioni

1

Aprire il file HTML della pagina Web che desideri modificare. Utilizzare un editor di codice, ad esempio jEdit, Notepad + + o BBEdit. HTML tag venire in coppia con un tag di apertura e chiusura, e contenuto interessato dai tag è racchiuso all'interno di essi. Trovare i tag che racchiudono il contenuto che si desidera dare un sfondo semi-trasparente. Ecco un esempio:

< div id = "casella" class = "blue" > contenuto... < / div >

2

Aprire il file CSS per il tuo sito nell'editor di codice. Se il tuo sito Web non utilizza un file CSS, aggiungere il codice CSS tra < style > e < / stile > tag tra i tag < head > su file HTML. Aggiungere questo codice CSS:

{} div #box offenda

Il testo davanti le parentesi graffe sono selettori CSS. Il primo selettore seleziona dal nome del tag, il secondo seleziona da ID e l'ultimo seleziona dal nome classe. Hai solo bisogno di un selettore, ma è possibile aggiungere più selettori come mostrato nell'esempio. Utilizzare le informazioni trovate nei tag HTML per scrivere il tuo selettori.

3

Aggiungere le regole di stile CSS tra parentesi graffe. RGBa uso..--colore rosso, verde e blu con trasparenza alfa..--per impostare un colore semi-trasparente per lo sfondo. Ottenere i valori di colore rosso, verde e blu dal vostro programma di grafica o trovarli utilizzando uno strumento di prelievo colore su Internet. Il codice è simile al seguente:

offenda {

colore di sfondo: rgba(0,0,255,0.5);

}

Nell'esempio di cui sopra rende il colore di sfondo blu con 50% di opacità. Impostare l'ultimo valore nel set di quattro numeri a "1" per rendere un colore pieno-opacità.

4

Aggiungere il seguente codice tra i tag < head > del file HTML per rendere il colore di sfondo semi-trasparente compatibile con Internet Explorer 8 e sotto:

<!-[se IE] >

< style >

.blue {

background: transparent;

Filter:ProgID:DXImageTransform.Microsoft.Gradient(startColorstr=#0000ff50,endColorstr=#0000ff50);

< / stile >

<! [endif]-->

Sostituire le prime sei cifre dopo "startColorstr =" con il codice esadecimale del colore, che è possibile trovare utilizzando uno strumento di selezione di colore su Internet. Sostituire le ultime due cifre con la percentuale di opacità desiderato, ad esempio "50" per il 50 per cento o "75" il 75 per cento. Rendere il valore di "endColorstr" identico a "startColorstr".