Wiele osób używa CSS do dostosowania tekstu, zmiany czcionki, koloru, rozmiaru i innych elementów. Jedną z rzeczy, o których wiele osób często zapomina, jest to, że możesz używać CSS również z obrazami.
Zmiana samego obrazu
CSS pozwala dostosować sposób wyświetlania obrazu na stronie. Może to być bardzo przydatne w utrzymaniu spójności stron. Ustawiając style na wszystkich obrazach, tworzysz standardowy wygląd swoich obrazów. Niektóre z rzeczy, które możesz zrobić:
- Dodaj obramowanie lub obrys wokół obrazów
- Usuń kolorowe obramowanie wokół połączonych obrazów
- Dostosowywanie szerokości i / lub wysokości obrazów
- Dodaj cień
- Obróć obraz
- Zmień style, gdy obraz jest przesuwany
Podarowanie obrazu jest znakomitym miejscem do rozpoczęcia. Ale powinieneś rozważyć więcej niż tylko granicę - pomyśl o całej krawędzi obrazu i dostosuj marginesy i dopełnienie. Obraz z cienką czarną obwódką wygląda ładnie, ale dodanie dopełnienia między obramowaniem a obrazem może wyglądać jeszcze lepiej.
img { obramowanie: 1 piksel czarny; wypełnienie: 5 pikseli;}
Dobrym pomysłem jest zawsze łączenie nie dekoracyjnych obrazów, jeśli to możliwe. Ale kiedy to zrobisz, pamiętaj, że większość przeglądarek dodaje kolorowe obramowanie wokół obrazu. Nawet jeśli użyjesz powyższego kodu do zmiany granicy, link zastąpi to, chyba że usuniesz lub zmienisz również granicę tego łącza. Aby to zrobić, należy użyć reguły podrzędnej CSS, aby usunąć lub zmienić ramkę wokół połączonych obrazów:
img> a { granica: brak;}
Możesz również użyć CSS, aby zmienić lub ustawić wysokość i szerokość swoich obrazów. Chociaż nie jest dobrym pomysłem korzystanie z przeglądarki w celu dostosowania rozmiarów obrazów ze względu na prędkość pobierania, są one znacznie lepsze w zmienianiu rozmiaru obrazów, aby nadal wyglądały dobrze. Dzięki CSS możesz ustawić wszystkie obrazy na standardową szerokość lub wysokość, a nawet ustawić wymiary względem kontenera.
Pamiętaj, że podczas zmiany rozmiaru obrazów, aby uzyskać najlepsze wyniki, zmień rozmiar tylko jednego wymiaru - wysokości lub szerokości. Spowoduje to, że obraz zachowa proporcje, a więc nie będzie wyglądał dziwnie. Ustaw drugą wartość na automatyczny lub opuścić go, aby poinformować przeglądarkę, aby zachować spójny współczynnik proporcji.
img { szerokość: 50%; height: auto;}
CSS3 oferuje rozwiązanie tego problemu z nowymi właściwościami dopasowany do obiektu i pozycja obiektu. Dzięki tym właściwościom można określić dokładną wysokość i szerokość obrazu oraz sposób obsługi współczynnika kształtu. Może to powodować efekt letterboxing wokół obrazów lub przycinanie, aby obraz pasował do wymaganego rozmiaru.
Podczas CSS3 dopasowany do obiektu i pozycja obiektu właściwości nie są jeszcze szeroko obsługiwane, istnieją inne właściwości CSS3, które są dobrze obsługiwane w większości nowoczesnych przeglądarek, których można użyć do modyfikowania obrazów. Rzeczy takie jak cienie, zaokrąglone rogi i transformacje do obracania, pochylania lub przenoszenia obrazów działają teraz w większości nowoczesnych przeglądarek. Następnie możesz użyć przejść CSS, aby obrazy zmieniały się, gdy są przesuwane, klikane lub tuż po pewnym czasie.
Używanie obrazów jako tła
CSS ułatwia tworzenie ozdobnego tła ze swoimi obrazami. Możesz dodać tło do całej strony lub tylko do określonego elementu. Łatwo jest stworzyć obraz tła na stronie z zdjęcie w tle własność:
body { background-image: url (background.jpg);}
Zmienić ciało selektora do określonego elementu na stronie, aby umieścić tło tylko na jednym elemencie.
Kolejną fajną rzeczą, jaką możesz zrobić z obrazami, jest utworzenie obrazu tła, który nie przewija się wraz z resztą strony - jak znak wodny. Po prostu korzystasz ze stylu tło-załącznik: naprawiony; wraz z obrazem tła. Inne opcje dla tła to ustawianie ich w pionie lub poziomie za pomocą powtarzanie tła własność. pisać background-repeat: repeat-x; ułożyć obraz poziomo i background-repeat: repeat-y; ułożyć pionowo. I możesz ustawić swój obraz tła za pomocą pozycja tła własność.
CSS3 dodaje także więcej stylów dla twojego tła. Możesz rozciągnąć swoje obrazy, aby dopasować je do dowolnego rozmiaru tła, lub ustawić skalę obrazu tła z rozmiarem okna. Możesz zmienić pozycję, a następnie przyciąć obraz tła. Ale jedną z najlepszych rzeczy na temat CSS3 jest to, że można teraz warstwować wiele obrazów tła, aby stworzyć jeszcze bardziej zawiłe efekty.
HTML5 pomaga stylom obrazów
The POSTAĆ element w HTML5 powinien być umieszczony wokół wszystkich obrazów, które mogą występować samodzielnie w dokumencie. Jednym ze sposobów myślenia o tym, czy obraz może pojawić się w dodatku, to powinno być wewnątrz POSTAĆ element. Następnie możesz użyć tego elementu i FIGURKA element, aby dodać style do swoich obrazów.
