Краткий анализ свойств клипов CSS

Атрибут clip — относительно полезный атрибут, но он часто редко встречается в практических приложениях, и на 52CSS.com его представлено очень мало. При применении атрибута клипа следует учитывать два момента:
1. Для вступления в силу атрибут клипа должен использоваться вместе с атрибутом позиционирования.
2. Расчетные координаты обрезки клипа рассчитываются, начиная с верхнего левого угла, то есть точки (0,0), как показано на рисунке 3. Это отличается от заполнения и поля для правого и нижнего полей. они от самой правой точки и считаются снизу.

Основной синтаксис атрибута клипа:


Описание атрибута клипа:
Получает или задает видимую область объекта. Части вне зоны просмотра прозрачны.
Это свойство определяет размер видимой области абсолютно позиционированного объекта. Чтобы можно было использовать это свойство, значение свойства позиции должно быть установлено в абсолютное значение.
Это свойство доступно на платформах MAC, начиная с IE5.
Соответствующее свойство скрипта — clip.
Помимо создания цветного текста, атрибут clip в CSS также может эффективно обрезать элементы на других веб-страницах.

Атрибут clip задает форму элемента. Это свойство используется для определения прямоугольника отсечения. Видно только содержимое внутри этого прямоугольника, а содержимое за пределами этой области отсечения имеет тот же эффект, что и overflow:hidden. Область отсечения может быть больше или меньше области содержимого элемента.
Значение атрибута клипа: auto | rect (сверху, справа, снизу, слева)
«Авто» означает отсутствие обрезки. Четыре направления прямоугольника должны быть заполнены числовыми значениями, указывающими положение обрезки.
Ниже я приведу простой пример обрезки изображения.
Сначала подготовьте картинку, как показано на рисунке 1, ее размер 159px*99 пикселей. Я планирую использовать атрибут клипа, чтобы обрезать изображение так, чтобы на изображении отображалась только большая красная точка.
Сначала я создаю фрейм div для размещения изображения. Его CSS определяется следующим образом:


Для атрибута позиционирования этого элемента div установлено относительное позиционирование, чтобы использовать его в качестве стандарта позиционирования изображения. Фон определяется как #FFF985, чтобы сделать эффект отображения более очевидным.
Затем определите свойства обрезки изображения. Определение CSS выглядит следующим образом:


Абсолютное позиционирование здесь указано относительно div с идентификатором imgClip. Значения в клипе располагаются в порядке сверху, справа, снизу и слева.
HTML-код: