Najlepszy samouczek CSS obraz przezroczysty / nieprzezroczysty W 2024 r. W tym samouczku możesz dowiedzieć się Więcej przykładów,Przykład 1 - Tworzenie przezroczysty obraz,Przykład 2 - Przejrzystość Image - unoszą się efekt,Przykład 3 - Transparent text box,
Za pomocą CSS jest łatwo stworzyć przejrzysty obraz.
Uwaga: Właściwość CSS Kryciejest częścią zaleceń W3C CSS3.
Stworzenie przejrzystego obrazu - unoszą się efekt
Utworzyć pole tekstowe ma przezroczyste tło obrazu
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:
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.
Przesuń kursor myszy nad obrazem:
style CSS:
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ść.
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:
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.