Stylowe obrazy w CSS

Jeśli chodzi o zwiększenie piękna projektowania stron internetowych, często myślimy o dodaniu zdjęć do naszej strony internetowej. Jednak samo dodanie obrazów nie wystarczy, dlatego musisz je stylizować na różne sposoby, aby wyglądały bardziej atrakcyjnie. CSS zapewnia wiele właściwości, których można użyć do dodawania stylizacji do obrazów.

Ten post oświeca, jak stylizować obrazy w CSS. W tym przewodniku przejdziesz następujące informacje:

1. Jak robić kółko
2. Jak zrobić zaokrąglone obrazy narożne
3. Jak robić responsywne obrazy
4. Jak wyśrodkować obrazy
5. Jak robić przejrzyste obrazy
6. Jak umieścić tekst na obrazach
7. Jak dodać filtr do obrazów
8. Jak zrobić nakładkę na obrazy na obrazach
9. Jak odwracać obrazy

Zacznijmy.

Jak robić kółko

Aby sprawić, że twoje obrazy pojawiają się jako kręgi, użyj właściwości CSS Border-Radius. Poniżej przedstawiliśmy ci przykład okrągłego obrazu.

Html

Tutaj po prostu dodaliśmy obraz w atrybucie SRC znacznika.

CSS

img
Radiusz graniczny: 50%;
szerokość: 200px;
Wysokość: 200px;

Ustawianie promieni granicznych na 50% sprawiamy, że obraz jest okrągiem. Możesz zmienić wartość, jeśli chcesz uczynić ją owal lub mniej zaokrągloną.

Wyjście

Obraz został pomyślnie okrążony.

Jak zrobić zaokrąglone obrazy narożne

Właściwość CSS Border-Radius może być również użyta do zaokrąglonego zakątka obrazów, oto jak to robisz.

CSS

img
RADIUS BRAVES: 10px;
szerokość: 200px;
Wysokość: 200px;

Tutaj dajemy wartość promieniowania granicznego w pikselach, aby zakręty zaokrąglały.

Wyjście

Kąty obrazu zostały zaokrąglone.

Jak robić responsywne obrazy

Obrazy responsywne dostosowują swój rozmiar zgodnie z oknem przeglądarki. Poniżej wspomniany przykład pokazuje, jak to zrobić.

Html

W powyższym kodzie po prostu dodaliśmy obraz.

CSS

img
maksymalna szerokość: 100%;
Wysokość: auto;

Aby obraz reagował, ustaw maksymalną szerokość na 100% i wysokość na automatyczne.

Wyjście

Obraz zmienia jego szerokość zgodnie z rozmiarem okna przeglądarki.

Jak wyśrodkować obrazy

Aby umieścić obraz w środku, wyświetl go jako element na poziomie bloków i ustaw marginesy na automatyczne. Rozważ przykład poniżej.

CSS

img
Blok wyświetlacza;
margines-lew: auto;
margines-prawy: auto;
szerokość: 300px;

Aby wyśrodkować obraz, po prostu wyświetlamy go jako element na poziomie bloku i ustawiamy jego prawe i lewe marginesy na automatyczne.

Wyjście

Obraz został wyrównany w środku.

Jak robić przejrzyste obrazy

Jeśli chcesz, aby Twoje obrazy były przezroczyste, użyj właściwości CSS krycia. Im mniejsza wartość właściwości krycia, tym bardziej przezroczystość obrazu.

CSS

img
Krycie: 0.3;
szerokość: 300px;

W powyższym kodzie krycie obrazu ustawiono na 0.3.

Wyjście

Obraz został skutecznie przezroczysty.

Jak umieścić tekst na obrazach

Użyj właściwości pozycji CSS, aby umieścić tekst na niektórych pozycjach na obrazach. Różne pozycje, które można umieścić tekst na obrazie, są następujące.

1. Lewy górny
2. Na dole po lewej
3. Centrum
4. W prawym górnym rogu
5. Prawy dolny

Tutaj pokazaliśmy z pomocą przykładu.

Html

To jest wieża Eiffla

W powyższym kodzie utworzyliśmy kontener DIV i umieściliśmy obraz i inny kontener DIV w nim.

CSS

.div
Pozycja: względny;

.lewy górny
Pozycja: absolutna;
TOP: 5px;
po lewej: 5px;
Rozmiar czcionki: 20px;
Styl czcionki: Kursywa;

img
szerokość: 400px;
Krycie: 0.5;

Pierwsza Div otrzymała względną pozycję, aby drugi div, który trzyma tekst, można było umieścić w nim. Korzystając z klasy TOPLEFT, przypisujemy drugą Div pozycję bezwzględną i nadajemy jej długość od góry i lewej, co więcej, nadając tekstowi i styl czcionki do tekstu.

Wyjście

Tekst został dodany na obrazie w lewej górnej pozycji.

Jak dodać filtry do obrazów

Aby dodać filtr do obrazów, takich jak rozmycie lub nasycenie, użyj właściwości filtra. Zapoznaj się z przykładem poniżej:

CSS

img
szerokość: 300px;

.odwrócić
Filtr: Odwróć (100%);

Tutaj używamy metody invert () w właściwości filtra, aby dodać efekty wizualne do obrazu.

Wyjście

Efekty wizualne zostały pomyślnie dodane do obrazu.

Niektóre inne metody, które można użyć na właściwości filtra, aby dodać różne efekty wizualne:

• plama(),
• kontrast(),
• jasność(),
• Grayscale (),
• nasycić(),
• nieprzezroczystość () itp.

Jak odwracać obrazy

Odrzucanie obrazu, gdy użytkownik przynosi na niego mysz, może być interesującą rzeczą. Aby to zrobić, użyj właściwości transformacji CSS.

CSS

IMG: Hover
Transform: Scaley (-1);
szerokość: 300px;

Tutaj przerzucamy obraz wzdłuż osi Y za pomocą metody właściwości transformacji scaley ().

Wyjście

Obraz został przerzucony przez oś y.

Wniosek

Stylowe obrazy pojawiające się na Twojej stronie są bardzo ważne i można to zrobić za pomocą różnych właściwości CSS. Wiele rzeczy, które możesz zrobić, aby stylizować swoje obrazy, to sprawi, że są okrągiem, sprawić, by zakręty są zaokrąglone lub uczynić miniaturą. Ponadto możesz sprawić, by swoje obrazy były reaktywne lub dodać na nich tekst lub niektóre efekty wizualne. W tym poście pokazaliśmy wiele sposobów, w jakie możesz stylizować swoje obrazy za pomocą CSS, wraz z odpowiednimi przykładami.