June 22
Web designer utilizzano regole di Cascading Style Sheet (CSS) per stabilire l'opacità di un elemento sito web. La proprietà CSS opacità permette al progettista di creare un effetto simile al vetro in cui l'utente di Internet vede attraverso l'elemento sito web per l'elemento di fondo che si trova dietro di esso. Un problema è i valori della proprietà vengono ereditati automaticamente elementi figli. Evitare il problema decisioni in applicazione impostazioni di opacità al valore RGBA della proprietà background CSS. Questi valori non sono ereditati automaticamente da elementi figli.
1 Scrivi una regola CSS per un nuovo elemento principale. L'esempio seguente crea 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 sulla sinistra della pagina e posiziona 30 pixel di imbottitura attorno all'elemento bambino. Utilizzando la proprietà padding è di fondamentale importanza in quanto finirà per rappresentare la componente trasparente dell'elemento genitore mentre centrare l'elemento figlio.
myParentElement {
position: absolute;
top: 100px;
sinistra: 50px;
padding: 30px;
}
2 Assegnare una proprietà di trasparenza alla regola #myParentElement. Questo esempio utilizza il valore RGBA della proprietà background CSS per lo stile uno sfondo parzialmente trasparente per l'elemento genitore. In contrasto con la proprietà di opacità, l'impostazione di opacità RGBA non si passa automaticamente a elementi figlio. Il valore accetta quattro impostazioni. I primi tre impostazioni stabiliscono i singoli componenti di rosso, verde e blu. Il quarto impostazione determina l'opacità su una scala di 0,1 a 1. In questo esempio le impostazioni del rosso e verde sono lasciati a zero mentre l'impostazione del blu è posto a 10 e l'opacità è impostato a .5. Questo creerà una mascherina trasparente con uno schermo grigio.
myParentElement {
position: absolute;
top: 100px;
sinistra: 50px;
padding: 30px;
fondo: RGBA (0, 0, 10, 0.5);
}
3 Scrivi una regola CSS per l'elemento figlio. In questo esempio, la regola #myChildElment contiene semplicemente il testo nero su sfondo bianco. Questo elemento non sarà inerente il valore di opacità .5 dalla regola #myParentElment.
myChildElement {
sfondo: bianco;
colore nero;
}
4 Applicare il CSS al documento HTML. Gli stili CSS un div bambino (elemento sito web) con scritta nera su sfondo bianco. Questo div che si trova all'interno del div genitore. Il div genitore ha 30 pixel (a causa della proprietà padding), parzialmente trasparente bordo grigio. la trasparenza del div genitore non viene ereditato dal div bambino.
<Div id = "myParentElement"> <div id = "myChildElement"> Il testo per il div bambino va qui. </ Div> </ div>