Jak przyciemnić obrazek w CSS

Ściemnianie obrazu utrudnia zobaczenie, ale może to być efekt, którego szukasz. Ciemny obraz staje się mniej widoczny na stronie internetowej i przyciąga mniej uwagi niż otaczające go obiekty. Możesz na przykład przyciemnić zdjęcie słonecznej plaży, aby narysować ostrość użytkownika w menu poniżej obrazu. Nie musisz tworzyć wielu obrazów, aby uzyskać efekt przyciemnienia. Kaskadowe arkusze stylów lub CSS mogą wykonać tę sztuczkę za pomocą kilku linii kodu.

CSS

CSS to język używany przez projektantów witryn do definiowania sposobu wyświetlania obiektów na stronach internetowych. Te atrybuty, takie jak kolor i krycie, mają wartości przedstawione w następującym przykładzie: .redBorder {border-color: red; border-style: solid;}

Ten kod tworzy klasę CSS o nazwie redBorder. Jeśli jeden ze znaczników HTML img odwołuje się do tej klasy, użytkownicy witryny widzą solidną czerwoną ramkę wokół obrazu podczas przeglądania go na stronie internetowej. Kod HTML odwołujący się do tej klasy wygląda następująco, a czerwoną granicę można usunąć, usuwając odwołanie do klasy w tym znaczniku img:

.

Opacity CSS

Zmieniając krycie obrazu za pomocą CSS, ściemniasz go. Poniższy kod tworzy klasę o nazwie opacity40, która definiuje wartości nieprzezroczystości 40 procent: .opacity40 {filter: alpha (nieprzezroczystość = 40);

nieprzezroczystość: 0, 4; }

Atrybut filtra klasy używa skali krycia od 0 do 100, a jego atrybut krycia ma skalę krycia z wartościami od 0 do 1. Korzystanie z obu atrybutów zapewnia, że ​​wszystkie przeglądarki mogą zmieniać nieprzezroczystość obrazu. Dodaj odwołanie do tej klasy do obrazu, aby go przyciemnić. Możesz również utworzyć klasę o nazwie "opacity100" i ustawić jej wartości, aby krycie obrazu było 100 procent. Ta klasa sprawi, że obraz będzie nieprzejrzysty.

Ściemnianie programowo

Twoja strona internetowa może wyświetlać przyciemnione zdjęcie, gdy użytkownicy otwierają stronę, lub Twój kod może spowodować przyciemnienie obrazu później po załadowaniu strony. Aby obraz był najpierw przyciemniony, ustaw jego krycie na niższą wartość, zgodnie z wcześniejszym opisem. Aby przyciemnić obraz podczas działania aplikacji, zmień nazwę klasy, która określa nieprzezroczystość obrazu, jak pokazano w poniższym przykładzie: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";

Ten kod, występujący w funkcji JavaScript, uzyskuje odwołanie do obrazu i zmienia nazwę klasy na "opacity40". Użytkownicy mogą kliknąć przycisk uruchamiający funkcję JavaScript lub Twój kod może wywołać ją w dowolnym momencie.

Rozważania

Funkcja JavaScript potrzebuje wartości identyfikatora obrazu, który chcesz przyciemnić, jeśli chcesz dynamicznie zmieniać jego nieprzezroczystość. Identyfikator obrazu w opisanym wcześniej przykładzie to "image1." Jeśli masz wiele obrazów do przyciemnienia, podaj im unikalne wartości id i przekaż je do funkcji wykonującej zmianę nieprzezroczystości. Utwórz dowolną liczbę klas CSS, które definiują różne stopnie krycia. Następnie można przyciemnić obraz w dowolnym stopniu, zmieniając jego odwołanie do klasy w funkcji JavaScript.

Popularne Wiadomości