Pozycjonowanie - CSS
Obcinanie {clip}
W jaki sposób automatycznie przyciąć do określonych rozmiarów obrazek (grafikę, zdjęcie) lub inny element strony (kadrowanie)?
selektor { position: absolute; clip: rect(góra, prawo, dół, lewo) }
Według CSS 2 polecenie można zastosować do elementów blokowych i zastępowanych. Natomiast w CSS 2.1 ma ono zastosowanie tylko do elementów pozycjonowanych absolutnie. Przeglądarki stosują się do wytycznych z CSS 2.1.
Zamiast całego wyrażenia
rect(góra, prawo, dół, lewo)
można również podać auto - wartość automatyczna.UWAGA! Powyższy opis ustalania krawędzi cięcia pochodzi ze specyfikacji CSS 2.1. We wcześniejszej wersji - CSS 2 - wartości "góra, prawo, dół, lewo" oznaczały odległości cięcia od odpowiednich krawędzi elementu, a nie współrzędne wyciętego prostokąta! Przeglądarki interpretują podane parametry zgodnie z nową wersją specyfikacji - CSS 2.1.
Polecenie pozwala wyciąć z elementu pewien jego fragment (o kształcie prostokąta), a następnie wyświetlić go na ekranie.
Specyfikacja CSS 2 wprowadziła dość poważne zamieszanie, jeżeli chodzi o składnię tego polecenia. Nie dość, że sposób ustalania krawędzi prostokąta cięcia został zupełnie zmieniony w CSS 2.1, ponieważ żadna przeglądarka - prawdopodobnie ze względu na trudności w implementacji - nie interpretowała wcześniejszej propozycji, to jeszcze na dodatek CSS 2 niejednoznacznie określiła, jakimi separatorami powinny być rozdzielone wartości w nawiasie rect(...)
. CSS 2.1 mówi wyraźnie: każda przeglądarka musi obsługiwać jako separator znak przecinka, ale dodatkowo może przyjmować samą spację. Całe to zamieszanie sprawiło, że MSIE 6.0-7.0 interpretuje wymienione separatory dokładnie na odwrót: spacja działa zawsze, a przecinek tylko w trybie wstecznej zgodności. Firefox i Opera obsługują równorzędnie oba separatory.
position: absolute
).MSIE 6.0-7.0 obsługuje to polecenie:
- w trybie Quirks - zawsze,
- w trybie zgodności ze standardami - tylko jeżeli wartości w nawiasie
rect(...)
nie zostały rozdzielone przecinkami.
Przykład {clip}
position: absolute; clip: rect(5px, 50px, 40px, 10px):position: absolute; clip: rect(5px 50px 40px 10px):
position: absolute; clip: rect(5px, auto, 40px, 10px):
Dla porównania bez wycinania:
Pytania i odpowiedzi
Jak przyciąć zdjęcie w CSS?
W CSS, aby przyciąć zdjęcie, można użyć właściwości clip
. Przykładowo, "clip: rect(0, 100px, 100px, 0)
" określa obszar do przycięcia, gdzie wartości to kolejno: górny, prawy, dolny i lewy margines przycinania.
Jak wyciąć fragment obrazu w CSS?
Aby wyciąć fragment obrazu w CSS, używa się właściwości clip
. Na przykład, jeśli mamy obraz o wymiarach 200 pikseli na 200 pikseli, i chcemy wyciąć jego górny lewy kwadratowy fragment o wymiarach 50 pikseli na 50 pikseli, możemy to zrobić następująco: "clip: rect(0, 50px, 50px, 0)
". Ta deklaracja clip
określa obszar, który ma być widoczny, a wartości to kolejno: górny margines, prawy margines, dolny margines i lewy margines. W tym przypadku, przycinamy górny lewy fragment o wymiarach 50px na 50px.