Web designer utilizzare regole di Cascading Style Sheet (CSS) per stabilire l'opacità di un elemento del sito Web. Proprietà CSS opacity consente al progettista di creare un effetto simile al vetro, dove l'utente di Internet si vede attraverso l'elemento del sito Web per l'elemento di fondo che si trova dietro di esso. Un problema è che i valori delle proprietà vengono ereditati automaticamente dagli elementi figlio. Evitare il problema di impostazioni di opacità perfettametne a valore RGBA della proprietà CSS background. Questi valori non vengono ereditati automaticamente dagli elementi figlio.

Istruzioni

1

Scrivere una regola CSS per un nuovo elemento padre. Nell'esempio seguente viene creata una nuova regola denominata #myParentElement. La regola assegna a una posizione assoluta di 100 pixel verso il basso dalla parte superiore della pagina, 50 pixel in da sinistra della pagina e 30 pixel di riempimento intorno all'elemento figlio. Utilizzando la proprietà padding è fondamentale in quanto alla fine rappresenterà la componente trasparente dell'elemento padre durante l'elemento figlio di centraggio.

myParentElement () {

Posizione: assoluta;

Top: 100px;

sinistra: 50px;

Imbottitura: 30px;

}

2

Assegnare una proprietà di trasparenza per la regola di #myParentElement. Questo esempio viene utilizzato il valore RGBA della proprietà CSS background stile sfondo parzialmente trasparente per l'elemento padre. In contrasto con la proprietà opacity, l'impostazione di opacità RGBA non viene automaticamente passata agli elementi figlio. Il valore accetta quattro impostazioni. Le prime tre impostazioni stabiliscono i singoli componenti di rosso, verde e blu. L'impostazione di quarto determina l'opacità su una scala da. 1 a 1. In questo esempio le impostazioni di rosse e verde sono lasciate a zero, mentre l'impostazione blu è posizionato a 10 e l'opacità è impostata a. 5. Questo creerà una sovrapposizione trasparente utilizzando uno schermo grigio.

myParentElement () {

Posizione: assoluta;

Top: 100px;

sinistra: 50px;

Imbottitura: 30px;

Priorità bassa: rgba (0, 0, 10, 0.5);

}

3

Scrivere una regola CSS per l'elemento figlio. In questo esempio la regola di #myChildElment semplicemente contiene testo nero su sfondo bianco. Questo elemento verrà non inerenti il valore opacità. 5 dalla regola di #myParentElment.

myChildElement () {

sfondo: bianco;

colore: nero;

}

4

Applicare i CSS al documento HTML. Il CSS stili un bambino div (elemento del sito Web) con la scritta su sfondo bianco nera. Questo div che viene posizionato all'interno del div padre. Il div padre ha un 30-pixel (dovuto la proprietà padding), il contorno grigio parzialmente trasparente. Trasparenza del div padre non è ereditato dal figlio div.

< div id = "myParentElement" >< div id = "myChildElement" > il testo per l'elemento div del bambino va qui. < / div >< / div >

Consigli & Avvertenze

• Sullo sfondo RGBA è supportato dai browser di Firefox, Safari, Chrome e Internet Explorer 9. Per creare la compatibilità con le versioni precedenti di Internet Explorer, Web designer deve utilizzare la proprietà di gradiente filtro Microsoft (filtro: progid:DXImageTransform.Microsoft.gradient) oltre alla proprietà RGBA (vedi riferimenti).