5 Właściwości CSS, które powinieneś wiedzieć

Istnieją właściwości CSS, takie jak obrazy tła, obrazy obramowania, maskowanie i właściwości obcinania, za pomocą których można bezpośrednio dodawaj obrazy do stron internetowych i kontrolować ich zachowanie. Jednak są też rzadziej wymieniane właściwości CSS związane z obrazem pracować nad obrazami dodanymi za pomocą Tag HTML, który jest preferowanym sposobem dodawania obrazów do stron internetowych.

Opis zadań tych ostatnich właściwości różni się od kontrolowanie cienia obrazu do ustawianie ostrości, pomaga nam lepiej kontrolować wygląd i położenie obrazów dodanych za pomocą etykietka. Zobaczmy je jeden po drugim.

1. Wyostrz obrazy za pomocą renderowanie obrazu

Gdy obraz jest skalowany, przeglądarka wygładza obraz, więc nie wygląda to na piksele. Ale w zależności od rozdzielczości obrazu i ekranu, może nie być najlepszy przez cały czas. Możesz kontrolować zachowanie przeglądarki za pomocą renderowanie obrazu własność.

Ta dobrze obsługiwana właściwość kontroluje algorytm używany do skalowania obrazu. Jego dwie główne wartości to ostre krawędzie i piksele.

The ostre krawędzie wartość utrzymuje kontrast kolorów między pikselami. Innymi słowy, nie ma wygładzania obrazów, które świetny do grafiki pikselowej.

Gdy piksele używany jest pobliski piksel piksela przyjmij jego wygląd, sprawiają, że wydają się razem tworzą jeden duży piksel, świetny do ekranów o wysokiej rozdzielczości.

Jeśli przyjrzysz się uważnie krawędziom kwiatów w GIF-ie poniżej, zobaczysz różnicę między zwykłym a a piksele obraz.

 img renderowanie obrazu: piksele;  

2. Rozciągnij obrazy za pomocą dopasowanie obiektowe

The zawierać, pokrywa, napełnić wartości są wszystkim znane, używamy ich do rozmiar tła właściwość kontrolująca sposób, w jaki obraz tła wypełnia element, do którego należy. The dopasowanie obiektowe właściwość jest do niej bardzo podobna, jak również określa jak rozmiar obrazu wewnątrz jego kontenera.

The zawierać wartość zawiera obraz w swoim pojemniku. pokrywa robi to samo, ale jeśli proporcje obrazu i kontenera się nie zgadzają, to obraz jest obcięty. napełnić powoduje, że obraz jest rozciągnij i napełnij pojemnik. pomniejszyć wybiera najmniejszą wersję obrazu do wyświetlenia.

 
  #container width: 300px; wysokość: 300px;  img szerokość: 100%; wysokość: 100%; dopasowanie obiektowe: zawierać;  

3. Przesuwaj obrazy za pomocą pozycja obiektu

Podobnie jak uzupełnienie pozycja tła własność rozmiar tła, jest pozycja obiektu właściwość dla dopasowanie obiektowe, zbyt.

The dopasowanie obiektowe własność przesuwa obraz wewnątrz pojemnika z obrazem do podanych współrzędnych. Współrzędne można zdefiniować jako jednostki długości bezwzględnej, jednostki długości względnej, słowa kluczowe (Top, lewo, środek, Dolny, i dobrze) lub a prawidłowa ich kombinacja (top 20px right 5px, środkowy prawy 80px).

 
  #container width: 300px; wysokość: 300px;  img szerokość: 100%; wysokość: 100%; pozycja obiektu: 150px 0;  

4. Sytuuj obrazy za pomocą wyrównaj pionowo

Czasami dodajemy (które są z natury wbudowane) obok ciągów tekstowych dla dodatkowej informacji lub dekoracji. W tym wypadku, wyrównanie tekstu i obrazu w pożądanej pozycji może być nieco trudna - jeśli nie wiesz, której właściwości użyć.

The wyrównaj pionowo nieruchomość jest nie dotyczy tylko samych komórek tabeli. Może również wyrównać element śródliniowy wewnątrz pola śródliniowego i dzięki temu można go używać wyrównaj obraz w linii tekstu. Wymaga to sporej liczby wartości, które można zastosować do elementu wbudowanego, więc masz wiele opcji do wyboru.

 
 PDF  
 

5. Obrazy cieni za pomocą filtr: drop-shadow ()

W przypadku niepozornego używania w tekstach i polach cienie mogą dodać życia stronie internetowej. To samo dotyczy zdjęć. Obrazy z rdzeniowymi kształtami i przezroczystymi tłami może skorzystać z drop-shadow Filtr CSS.

Jego argumenty są podobny do wartości właściwości CSS związanych z cieniem (cień tekstu, box-shadow). Pierwsze dwie reprezentują odległość pionowa i pozioma między cieniami a obrazem trzeci i czwarty to plama i rozpiętość promienia cienia, a ostatni to kolor cienia.

Tak jak cień tekstu, drop-shadow tworzy także cień uformowane do przynależnego obiektu. Tak więc, gdy zostanie zastosowany do obrazu, cień przybiera kształt widocznej części obrazu.

 img filter: drop-shadow (0 0 5px blue);  

Czytaj także: Odbicie obrazu CSS3 [Porady CSS3]