opacità/trasparenza CSS
opacity L'attributo specifica l'opacità/trasparenza dell'elemento.
immagine trasparente
opacity Il valore dell'attributo di opacità varia da 0.0 a 1.0. Più basso è il valore, più trasparente è:
opacity 0.2
opacity 0.5
opacity 1
Esempio
img {
opacity: 0.5;
}
effetto di hover trasparente
opacity L'attributo è generalmente utilizzato con :hover Utilizzare insieme il selettore, in modo che possa essere modificata l'opacità quando l'utente passa il mouse:
Esempio
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Spiegazione degli esempi
Il primo blocco CSS è simile al codice dell'esempio 1. Inoltre, abbiamo aggiunto un effetto quando l'utente passa il mouse su una delle immagini. In questo caso, quando l'utente passa il mouse sulle immagini, desideriamo che le immagini non siano opache. Questo CSS è opacity:1;.
Quando il puntatore del mouse lascia l'immagine, l'immagine tornerà trasparente.
Esempio di effetto di hover inverso:
Esempio
img:hover {
opacity: 0.5;
}
casella trasparente
Utilizzando opacity Quando si aggiunge l'opacità all'elemento, tutti i figli dell'elemento ereditano la stessa opacità. Questo potrebbe rendere difficile leggere il testo all'interno di elementi completamente trasparenti:
Esempio
div {
opacity: 0.3;
}
Opacità utilizzando RGBA
Se non desideri applicare l'opacità ai figli dell'elemento, come nell'esempio sopra, utilizza i valori di colore RGBA. Nell'esempio seguente viene impostato il colore di sfondo anziché l'opacità del testo:
Hai già imparato da CSS 颜色 In questa sezione hai imparato come utilizzare i colori RGB come valori di colore. Oltre ai colori RGB, è possibile utilizzare i valori di colore RGB insieme al canale alpha (RGBA) - che determina l'opacità del colore.
Il valore del colore RGBA viene specificato come: rgba(red, green, blue, alpha) alpha I parametri sono numeri tra 0.0 (completamente trasparente) e 1.0 (completamente opachi).
Suggerimento:In CSS 颜色 In questa sezione hai imparato di più sulle colori RGBA.
Esempio
div {
background: rgba(76, 175, 80, 0.3) /* Sfondo verde con opacità del 30% */
}
Testo nella casella trasparente
Questo è un testo situato all'interno di una casella trasparente.
Esempio
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Questo è del testo situato all'interno di una casella trasparente.</p>
</div>
</div>
</body>
</html>
Spiegazione degli esempi
Prima di tutto, abbiamo creato un elemento <div> con sfondo immagine e bordo (class="background").
Poi, abbiamo creato un altro <div> (class="transbox") all'interno del primo <div>.
<div class="transbox"> ha sfondo e bordo - questo div è trasparente.
All'interno di un <div> trasparente, abbiamo aggiunto del testo all'interno dell'elemento <p>.
