Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Позиционирование : clip

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

Атрибут clip | Свойство clip

Определяет, какая часть объекта с абсолютным позиционированием будет видима.

Синтаксис

HTML { clip : sClip }
Скрипты [ sClip = ] object.style.clip

Используемые значения

sClip
Строка, которая может определять и принимать от одно из следующих значений:
auto
Значение по умолчанию. Видима вся область объекта.
rect (top, right, bottom, left)
Top, right, bottom и left определяют значения длины, каждое из которых может быть заменено на auto, соответствующие областям отсечения. Значение top показывает, что все, что выше этого значения по оси Y (значение 0 в верхней точке), будет отрезано. Значение right показывает, что все, что правее этого значения по оси X (значение 0 в самой левой точке), будет отрезано. Значение left показывает, что все, что левее этого значения по оси X (значение 0 в самой левой точке), будет отрезано. Значение bottom показывает, что все, что ниже этого значения по оси Y (значение 0 в верхней точке), будет отрезано.

Это свойство читается/записывается для всех объектов. Значением по умолчанию является auto. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

В Internet Explorer 8.0 синтаксис для свойства clip идентичен тому, который описан в спецификации Cascading Style Sheets (CSS), Level 2 Revision 1 (CSS2.1). Поэтому параметры должны быть перечислены через запятые для значения rect.

В Internet Explorer 7.0 и более ранних версиях запятые можно опустить. Например,
clip:rect(0 50 50 0)
.

Это свойство форму и размер видимой части позиционированного объекта. Свойству position должно быть задано значение absolute. Любая часть объекта, находящаяся не в видимой области, становится прозрачной (transparent). Любое значение для координат может быть заменено на auto, чтобы сделать видимой соответствующую сторону объекта (фактически, это означает, что сторона не будет обрезана).

Если задать значения в таком порядке: clip:rect(0, 0, 50, 50), то объект будет невидимым, потому что верхнее и правое значения установлены в ноль. Чтобы добиться отображения объекта в режиме 50-на-50, надо задать clip:rect(0, 50, 50, 0).

Свойство clip и атрибут clip доступны на платформе Macintosh, начиная Internet Explorer 5.0

Примеры

В первом примере используется атрибут clip для задания парметров отображения объекта.

<HTML>
<BODY>
<DIV STYLE="position:absolute;top:0;left:100;
    clip:rect(15px, auto, auto, auto)">
<IMG SRC="sphere.jpg"/>
</DIV>
<DIV STYLE="position:absolute;top:0;left:200;
    clip:rect(auto, 15px, auto, auto)">
<IMG SRC="sphere.jpg"/>
</DIV>
<DIV STYLE="position:absolute;top:0;left:300;
    clip:rect(auto, auto, 15px, auto)">
<IMG SRC="sphere.jpg"/>
</DIV>
<DIV STYLE="position:absolute;top:0;left:400;
    clip:rect(auto, auto, auto, 15px)">
<IMG SRC="sphere.jpg"/>
</DIV>
</BODY>
</HTML> 

Во втором примере используется свойство clip, чтобы обрезать изображения после нажатия на кнопку.

<IMG ID="sphere" SRC="sphere.jpg" 
    STYLE="position:absolute;top:0cm;left:0cm;">

<BUTTON 
    onclick="sphere.style.clip='rect(0.2cm, 0.6cm, 1cm, 0.1cm)'">
    Обрезать рисунок</BUTTON>

Стандарты

Это свойство описано в Cascading Style Sheets (CSS), Level 2 (CSS2)

Поддерживаемые браузеры

Internet Explorer 5.5, 6.0, 7.0, 8.0

Opera 7.0, 8.0, 9.2, 9.5, 9.6, 10.0

Safari 1.3, 2.0, 3.1

Firefox 1.5, 2.0, 3.0, 3.5

Браузер Opera 7.0 фон и рамку элемента оставляет прежними, а скрывает только содержимое элемента.

Ссылки на источники

http://msdn.microsoft.com/en-us/library/ms530748(VS.85).aspx

https://developer.mozilla.org/en/CSS/clip

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования