Stworzenie przejrzystych obrazów z CSS jest łatwe.
CSS opacity Obiekt jest częścią rekomendacji CSS3.
Przykład 1 - Tworzenie przezroczysty obraz
Nieruchomość CSS3 przejrzystości jest opacity .
Najpierw pokażemy, jak stworzyć przejrzysty obraz z CSS.
Regularne zdjęcie:
Ten sam obraz z przezroczystością:
Spójrz na poniższy CSS:
opacity nieruchomość może przybierać wartości od 0.0 - 1.0. Im niższa wartość, tym bardziej przejrzyste.
IE8 i wcześniejsze zastosowanie filter:alpha(opacity=x) . X może przyjmować wartości od 0 - 100. Niższa wartość sprawia, że element bardziej przejrzyste.
Przykład 2 - Przejrzystość Image - Najedź Effect
Najedź na zdjęciach:
CSS wygląda następująco:
Przykład
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 */
}
Spróbuj sam " Pierwszy blok CSS jest podobny do kodu w przykładzie 1. Ponadto, został dodany, co się stanie, kiedy użytkownik najeżdża kursorem na jednym z obrazów. W tym przypadku chcemy, aby obraz nie jest przejrzysta, gdy użytkownik znajdzie się nad nią. CSS jest to, opacity:1; .
Gdy wskaźnik myszy oddala się od obrazu, obraz będzie przezroczysty ponownie.
Przykład 3 - Tekst w przezroczyste pudełko
To jest tekst, który jest umieszczony w przezroczystym opakowaniu.
Kod źródłowy wygląda następująco:
Przykład
<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>
Spróbuj sam " Po pierwsze, możemy utworzyć <div> elementu (class="background") z obrazem tła i obramowania. Następnie tworzymy kolejną <div> (class="transbox") wewnątrz pierwszej <div> . <div class="transbox"> mieć kolor tła i obramowanie - div jest przezroczysta. Wewnątrz przejrzyste <div> , dodajemy trochę tekstu wewnątrz <p> elementu.