2014-02-10
314
Визуальные эффекты CSS
Свойства визуальных эффектов позволяют задать способы вывода элементов на экран. К этой группе относятся свойство overflow (см. 4.3.25.2), а также свойства clip, visibility и cursor.
Свойство clip позволяет обрезать видимое изображение абсолютно позиционированного элемента. По умолчанию (значение "auto") элемент имеет свой оригинальный размер.
Значение
rect(верхняя-граница, правая-граница, нижняя-граница, левая-граница)
определяет в абсолютных или относительных единицах соответственно, верхнюю, правую, нижнюю и левую границы видимого изображения элемента относительно блока отображения.
Значение inherit определяет наследование свойства clip из родительского элемента.
Пример 4.5.60. Использование свойства clip:
Для тела документа HTML
<div style="position:absolute;top: 20px;left: 20px">
<img src="images/Eagle.png"/>
</div>
<div style="position:absolute;top:20px;left: 220px;
clip:rect(30px, 150px, 170px, 5px)">
<img src="images/Eagle.png"/>
</div>
<div style="position:absolute;top: 20px;left: 320px;
clip:rect(60px, 150px, 110px, 90px)">
<img src="images/Eagle.png"/>
</div>
<div style="position:absolute; top:20px; left:460px;
clip:rect(60px, 105px, 85px, 60px)">
<img src="images/Eagle.png"/>
</div>
вывод Web-страницы будет иметь следующий вид:
|
