CSS obraz przezroczysty / nieprzezroczysty
Za pomocą CSS jest łatwo stworzyć przejrzysty obraz.
Uwaga: Właściwość CSS Kryciejest częścią zaleceń W3C CSS3.
Więcej przykładów
Stworzenie przejrzystego obrazu - unoszą się efekt
Utworzyć pole tekstowe ma przezroczyste tło obrazu
Przykład 1 - Tworzenie przezroczysty obraz
Przejrzystość własności CSS3 jestkrycie.
Najpierw pokażemy, jak stworzyć przejrzysty obraz z CSS.
Normalny obraz
Ten sam obraz z przezroczystością:
Rozważmy następujący CSS:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, Opera i Safari wykorzystuje właściwości przejrzystości obrazu mogą stać się nieprzezroczyste. Krycie wartość nieruchomości od 0.0 - 1.0. Mniejsze wartości sprawiają, że element bardziej przejrzyste.
IE8 i wcześniejsze wersje użyciu filtra: alpha (opacity = x). X może przyjmować wartości od 0 - 100. Niższe wartości sprawiają, że element bardziej przejrzyste.
Przykład 2 - Przejrzystość Image - unoszą się efekt
Przesuń kursor myszy nad obrazem:
style 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 */
}
Pierwszy blok jest CSS w przykładzie 1, i tym podobne. Ponadto możemy również dodać, co się dzieje, gdy użytkownik przesuwa najechań kursorem myszy nad jednym z obrazów. W tym przypadku, gdy użytkownik przesunie kursor myszy nad obrazem, mamy nadzieję, że obraz jest wyraźny.
Jest toCSS: opacity = 1.
IE8 i wcześniejszezastosowanie: filter: alpha (opacity = 100 ).
Gdy wskazówka mysz od obrazu, obraz będzie ponownie przejrzystość.
Przykład 3 - Transparent text box
Tekst w przezroczystym pudełku. Tekst w przezroczystym pudełku. Tekst w przezroczystym pudełku. Tekst w przezroczystym pudełku. Tekst w przezroczystym pudełku. Tekst w przezroczystym pudełku. Tekst w przezroczystym pudełku. Tekst w przezroczystym pudełku. Tekst w przezroczystym pudełku. Tekst w przezroczystym pudełku. Tekst w przezroczystym pudełku. Tekst w przezroczystym pudełku. Tekst w przezroczystym pudełku.
Kod źródłowy jest w następujący sposób:
<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>
Po pierwsze, możemy utworzyć stałą wysokość i szerokość elementu div z obrazu tła i obramowania. Następnie tworzymy mniejsze elementy div wewnątrz pierwszej div. DIV mieć stałą szerokość, kolor tła granicę - i to jest przejrzyste. Wewnątrz przezroczystej div, dodajemy jakiś tekst wewnątrz elementu P.