CSS свойство clip

Это свойство определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. Работает только для абсолютно позиционированных элементов.

Внимание: Свойство clip не работает, если свойству overflow установлено значение visible.

CSS синтаксис

clip: auto | rect(Y1, X1, Y2, X2) | initial | inherit;

Возможные значения

ЗначениеОписание
autoЗначение по умолчанию. Ограничение отображаемой области не применяется.
rect(Y1, X1, Y2, X2)Ограничивает отображаемую область заданными значениями. В качестве значений используется расстояние от края элемента до области обрезки, которое задается в единицах CSS — пикселы (px), em и др.
initialУстанавливает значение по умолчанию.
inheritЗначение наследуется от родительского элемента.

Пример использования

Ограничим отображаемую область изображения


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