Atrybut clip CSS

Definicja i użycie

Atrybut clip przycina elementy absolutnie pozycjonowane.

Co się dzieje, gdy rozmiar obrazu jest większy niż zawierający go element? Atrybut "clip" pozwala określić widoczny rozmiar elementu, tak że element zostanie przycięty i wyświetlony w tej formie.

Wyjaśnienie

Ta właściwość służy do zdefiniowania prostokątnego przycinania. Dla elementu absolutnie zdefiniowanego, tylko zawartość wewnątrz tego przycinania jest widoczna. Zawartość poza tym obszarem przycinania jest przetwarzana zgodnie z wartością overflow. Obszar przycinania może być większy lub mniejszy niż obszar zawartości.

Zobacz również:

Kurs CSS:CSS pozycjonowanie

Podręcznik HTML DOM:Atrybut clip

Przykład

Przycinanie obrazu:

img
  {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
  }

Spróbuj sam

Gramatyka CSS

clip: auto|shape|initial|inherit;

Wartość atrybutu

Wartość Opis
shape Ustawienie kształtu elementu. Jedynym legalnym wartością kształtu jest: rect (top, right, bottom, left)
auto Domyślna wartość. Nie stosuje się żadnego przycinania.
inherit Definiuje, że wartość clip powinna być dziedziczona od elementu nadrzędnego.

Szczegółowe informacje techniczne

Domyślna wartość: auto
Inheredność: nie
Wersja: CSS2
Gramatyka JavaScript: object.style.clip="rect(0px,50px,50px,0px)"

Więcej przykładów

Ustawienie kształtu elementu
Ten przykład pokazuje, jak ustawić kształt elementu. Ten element jest wycięty w kształt i następnie wyświetlany.

Obsługa przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 7.0