Latest web development tutorials

CSS obraz przezroczysty / nieprzezroczysty

Za pomocą CSS jest łatwo stworzyć przejrzysty obraz.

Uwaga: Właściwość CSS Kryciejest częścią zaleceń W3C CSS3.


Przykłady

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

klematis

Ten sam obraz z przezroczystością:

klematis

Rozważmy następujący CSS:

img
{
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:

klematisklematis

style CSS:

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 */
}

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:

<html>
<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.