Crearea de imagini transparente cu CSS este ușor.
CSS opacity Proprietatea este o parte a recomandării CSS3.
Exemplul 1 - Crearea unei imagini transparente
Proprietatea CSS3 pentru transparenta este opacity .
În primul rând vă vom arăta cum să creați o imagine transparentă cu CSS.
Imagine Regular:
Aceeași imagine cu transparență:
alfa (opacitate = 40) „> Uită-te la următorul CSS:
Exemplu
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Încearcă - l singur » opacity Proprietatea poate lua o valoare 0.0-1.0. Valoarea inferioară, mai transparentă.
IE8 și utilizarea anterioară filter: alpha(opacity=x) . X poate lua o valoare de la 0 - 100. O valoare mai mică face ca elementul mai transparent.
Exemplul 2 - Transparența imaginii - Deplasați cursorul Efect
Mouse-ul peste imaginile:
CSS arata ca acest lucru:
Exemplu
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 */
}
Încearcă - l singur » Primul bloc CSS este similar cu codul din exemplul 1. În plus, am adăugat ce ar trebui să se întâmple atunci când un utilizator trece peste una dintre imagini. În acest caz, vrem ca imaginea să NU fie transparente atunci când utilizatorul trece peste ea. CSS pentru aceasta este opacity:1; .
Când cursorul mouse-ului se mută departe de imagine, imaginea va fi transparentă din nou.
Exemplul 3 - Text în cutie transparentă
Acesta este un text care este plasat în cutie transparentă.
Codul sursa arata ca acest lucru:
Exemplu
<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>
Încearcă - l singur » În primul rând, vom crea un <div> Element (class="background") , cu o imagine de fundal, și o frontieră. Apoi , vom crea un alt <div> (class="transbox") în interiorul primul <div> . <div class="transbox"> au o culoare de fundal, și o frontieră - cu elementul div este transparent. În interiorul transparent <div> , vom adăuga un text în interiorul unui <p> Element.