La creazione di immagini trasparenti con i CSS è facile.
Il CSS opacity proprietà è una parte della raccomandazione CSS3.
Esempio 1 - Creazione di un'immagine trasparente
La proprietà CSS3 per la trasparenza è opacity .
In primo luogo vi mostreremo come creare un'immagine trasparente con i CSS.
immagine normale:
La stessa immagine con trasparenza:
Guardate il seguente CSS:
Esempio
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Prova tu stesso " L' opacity proprietà può assumere un valore 0,0-1,0. Il valore più basso, il più trasparente.
IE8 e precedenti l'uso filter:alpha(opacity=x) . La x può assumere un valore compreso tra 0 - 100. Un valore basso rende l'elemento più trasparente.
Esempio 2 - Immagine Trasparenza - Passare Effect
Mouse sopra le immagini:
Il CSS è simile al seguente:
Esempio
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Prova tu stesso " Il primo blocco CSS è simile al codice nell'esempio 1. In aggiunta, abbiamo aggiunto cosa deve accadere quando un utente passa sopra una delle immagini. In questo caso si desidera che l'immagine non essere trasparente quando l'utente passa sopra di esso. Il CSS per questo è opacity:1; .
Quando il puntatore del mouse si allontana dall'immagine, l'immagine sarà di nuovo trasparente.
Esempio 3 - testo in scatola trasparente
Questo è un testo che viene inserito nella scatola trasparente.
Il codice sorgente è simile al seguente:
Esempio
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Prova tu stesso " In primo luogo, creiamo un <div> elemento (class="background") con un'immagine di sfondo, e un bordo. Poi creiamo un altro <div> (class="transbox") all'interno del primo <div> . Il <div class="transbox"> hanno un colore di sfondo, e un bordo - il div è trasparente. All'interno del trasparente <div> , si aggiunge un testo all'interno di un <p> elemento.