Obraz przycisku CSS
Przykład 01: Za pomocą znacznika stylu CSS do dodania obrazu w przycisku w pliku HTML
W tym przykładzie dodamy obraz wewnątrz przycisku za pomocą znacznika stylu CSS w nagłówku pliku. Wewnątrz stylu zbudujemy klasę dla przycisku, który zostanie wywołany później w ciele. Następnie utworzymy skrypt, w którym dodamy obraz do przycisku za pomocą techniki, o której wspominaliśmy wcześniej.
W poprzednim skrypcie otworzyliśmy znacznik stylu w nagłówku pliku. W tym znaczniku otwieramy parametry klasy przycisków, w których zdefiniujemy kilka właściwości projektowania dla elementu przycisku. Najpierw dodajemy obraz dla tła przycisku. Możemy dodać obraz za pośrednictwem „URL” lub „SRC”. Następnie dodajemy właściwość wielkości tła, która jest określona jako „okładka”. Następnie definiujemy również szerokość i wysokość przycisku. Następnie zamykamy tag stylu i przechodzimy do znacznika ciała. W tym znaczniku dodajemy nagłówek za pomocą znacznika H1. Następnie wywoływany jest znacznik przycisku. W tym znaczniku nazywamy klasę stylizacji, którą stworzyliśmy wcześniej, aby odziedziczyć całą stylistykę zdefiniowaną w klasie. Następnie zamykamy wszystkie pozostałe znaczniki i zapisujemy plik w formacie HTML.
Jak widać na poprzednim wyjściu, obraz pojawia się jako przycisk na stronie naszej przeglądarki wraz z nagłówkiem. To uzasadnia to, że klasa stylingowa została pomyślnie odziedziczona przez znacznik przycisku.
Przykład 02: Dodanie obrazu w przycisku za pomocą wbudowanego podejścia CSS
W tym przypadku dodamy obraz do przycisku za pomocą podejścia wbudowanego CSS. Dodamy obraz do domyślnego elementu przycisku języka znacznika hipertexta, nadając mu adres URL obrazu w tej metodzie. Teraz spójrzmy na skrypt tej techniki.:
W skrypcie odzwierciedlonym na obrazie widzimy, że nagłówek pliku jest pusty, ponieważ w tym przykładzie użyjemy podejścia CSS. Otwieramy nasz przycisk. W tagu wspominamy CSS, który chcemy, aby przycisk miał w właściwości stylu. Wspominamy o wszystkich stylach w tej nieruchomości i oddzielamy je półkolisami. Dodajemy również obraz za pomocą słowa kluczowego obrazu tła i przypisujemy obraz za pośrednictwem adresu URL. Następnie znacznik przycisku jest zamykany wraz z tagiem nadwozia. Następnie otwieramy ten plik HTML w naszej przeglądarce.
Poprzednie wyjście jest dowodem na to, że podejście tagu w stylu wbudowanym zakończyło się sukcesem. Widzimy, że obraz jest dodawany do przycisku, a przycisk domyślny jest teraz przekształcony w obraz.
Przykład 03: Za pomocą tagów stylów CSS do dodania obrazu do przycisku, gdy się unosi
Dodamy obraz do przycisku, który pojawi się tylko wtedy, gdy przycisk zostanie unoszony w tym przykładzie. Użyjemy stylu CSS, aby zapewnić przycisk takiego zachowania w pliku HTML. W tym przykładzie utworzymy osobną klasę, aby oddzielić ten styl dla określonego elementu. Aby osiągnąć ten cel, powinniśmy napisać następujący skrypt:
W poprzednim skrypcie otworzyliśmy nasz znacznik głowy dla pliku HTML. W tym znaczniku styl przycisku jest zdefiniowany przez otwarcie klasy dla elementu przycisku. W tej klasie najpierw definiujemy szerokość i wysokość przycisku. Następnie dodajemy właściwość, która zamienia kursor w wskaźnik, a także podajemy tekst rozsądny rozmiar. Następnie dodajemy odziedziczoną metodę o nazwie „Hover” do klasy. W tej funkcji dodajemy obraz do tła za pośrednictwem adresu URL i przypisujemy właściwość do rozmiaru tła o nazwie „pokrycie”.
Następnie zamykamy wszystkie tagi stylizacji i zbliżamy się do ciała tego pliku. W znaczniku ciała dodajemy nagłówek za pomocą znacznika H1, a znacznik przycisku jest otwarty po znaczniku nagłówka. W znaczniku przycisku nazywamy klasę, którą utworzyliśmy w znaczniku stylu nagłówka pliku. A następnie zamknij przycisk i znacznik ciała. Następnie otwieramy ten plik w naszej przeglądarce, aby uzyskać następujące dane wyjściowe:
Wyjście, które widzimy w tym pliku, jest wynikiem po uniesieniu przycisku. Kiedy unosimy się nad przyciskiem, pojawia się obraz, który przypisaliśmy w stylu nagłówka pliku.
Przykład 04: Transformacja znacznika stylu CSS domyślnego przycisku do ikony dla następnej i poprzedniej funkcji
W tym przykładzie przekształcimy dwa domyślne przyciski języka znacznika hipertekstu za pomocą znacznika stylu CSS. W tym przykładzie przekształcimy dwa przyciski w następne i poprzednie ikony, dodając obraz w znaczniku stylu. Powinniśmy napisać następujący skrypt, aby to zrobić:
W poprzednim skrypcie dodajemy znacznik stylu w nagłówku pliku. Następnie tworzymy dwie klasy dla dwóch przycisków w stylu. W tych klasach dodajemy obraz odpowiednio zarówno przycisków, używając właściwości obrazu tła i formatu adresu URL obrazu. Po przypisaniu obu zajęć z ich właściwości. Najpierw dajemy granicę nagłówka za pomocą znacznika H1, który jest rozmiarem nagłówka zdefiniowanym w HTML. Następnie tworzymy dwa przyciski. W obu tych przyciskach przypisujemy klasę względną zdefiniowaną w znaczniku stylu. Następnie zamykamy zakładki i otwieramy ten plik w naszej przeglądarce po jego zapisaniu.
Poprzednie wyjście jest wynikiem naszego skryptu. Jak widzimy, oba przyciski są wyrównane, a obrazy z klas stylów są prawidłowo wstawiane. Teraz domyślne przyciski są przekształcane w następne i poprzednie ikony dla strony internetowej za pomocą CSS.
Wniosek
W tym artykule omówiliśmy kilka przykładów dodawania obrazów do przycisku za pomocą CSS. Użyliśmy wbudowanego CSS i Tag Style CSS, aby dodać obrazy do domyślnego przycisku w pliku HTML. Zaimplementowaliśmy kilka efektów na przycisku, aby dodać obraz taki jak efekt najemnika lub tło w stylu osłony za pomocą notatnika ++ do edytowania pliku HTML. Użyliśmy różnych właściwości w stylu CSS elementu przycisku, aby przekształcić je w atrakcyjny atrybut na naszej stronie internetowej.