immagine CSS trasparente / opaco
Usando i CSS è facile creare un'immagine trasparente.
Nota: proprietà CSS Opacitàfa parte delle raccomandazioni W3C CSS3.
Altri esempi
Creare un'immagine trasparente - hover effetto
Creare una casella di testo ha un'immagine di sfondo trasparente
Esempio 1 - Creare un'immagine trasparente
La trasparenza nella proprietà CSS3 èl'opacità.
In primo luogo, vi mostreremo come creare un'immagine trasparente con i CSS.
immagine normale
La stessa immagine con trasparenza:
Si consideri il seguente CSS:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, browser Opera, e Safari utilizza le proprietà di trasparenza dell'immagine possono diventare opachi. valore della proprietà Opacità 0,0-1,0. Valori più piccoli fanno l'elemento più trasparente.
IE8 e le versioni precedenti utilizzano filtri: alpha (opacità = x). X può assumere valori 0-100. Valori più bassi rendono l'elemento più trasparente.
Esempio 2 - Immagine Trasparenza - hover effetto
Muovi il mouse sull'immagine:
di stile CSS:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
Il primo blocco è il codice CSS nell'Esempio 1, e simili. Inoltre, abbiamo aggiunto anche quello che accade quando l'utente sposta il mouse sopra aleggia una delle immagini. In questo caso, quando l'utente sposta il mouse sull'immagine, speriamo che il quadro è chiaro.
Si tratta diCSS: l'opacità = 1.
IE8 euso precedente: Filtro: alpha (opacità = 100 ).
Quando il puntatore del mouse di distanza dall'immagine, l'immagine sarà ri-trasparenza.
Esempio 3 - Casella di testo trasparente
Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente. Il testo nella casella trasparente.
Il codice sorgente è il seguente:
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
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.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
In primo luogo, creiamo una altezza fissa e larghezza dell'elemento div un'immagine di sfondo e confine con. Viene creato un più piccoli elementi div all'interno del primo div. Questo div anche avere una larghezza fissa, colore di sfondo, bordo - ed è trasparente. All'interno del div trasparente, si aggiunge del testo all'interno dell'elemento P.