Очень важно понимать, что если цвет фона или фоновый рисунок элемента не задан, то фон элемента обычно прозрачный. Например, если поверх некоторого текста в обычном потоке вывода документа расположить элемент

с абсолютным позиционированием, то по умолчанию текст будет виден через элемент Если же элемент содержит собственный текст, символы окажутся наложенными друг на друга, образуя трудную для чтения мешанину. Однако не все элементы по умолчанию прозрачны. Например, элементы форм выглядели бы нелепо с прозрачным фоном, и такие элементы, как имеют цвет фона по умолчанию. Переопределить значение цвета по умолчанию можно с помощью свойства ; при необходимости можно явно установить цвет фона прозрачным («transparent»).

Прозрачность, о которой мы до сих пор говорили, может быть либо полной, либо нулевой: элемент имеет либо прозрачный, либо непрозрачный фон. Однако существует возможность получить полупрозрачный элемент (для содержимого как заднего, так и переднего плана). (Пример полупрозрачного элемента приведен на рис. 16.3.) Делается это с помощью свойства

, определяемого стандартом CSS3. Значением этого свойства является число в диапазоне от 0 до 1, где 1 означает 100-процентную непрозрачность (значение по умолчанию), а 0 - 100-процентную прозрачность. Свойство поддерживается всеми текущими броузерами, кроме IE. В IE аналогичная функциональность реализуется с помощью специфичного свойства . Чтобы сделать элемент непрозрачным на 75%, можно воспользоваться следующими CSS-стилями:

Свойство

позволяет полностью скрыть элемент документа. С помощью свойств и можно отобразить только часть элемента. Свойство определяет, что происходит, когда содержимое документа превышает размер, указанный для элемента (например, в свойствах стиля и ). Далее перечислены допустимые значения этого свойства и указано их назначение:

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

Содержимое, вышедшее за пределы элемента, обрезается и скрывается, так что никакая часть содержимого никогда не прорисовывается вне области, определяемой свойствами размера и позиционирования.

Область элемента имеет постоянные горизонтальную и вертикальную полосы прокрутки. Если содержимое превышает размеры области, полосы прокрутки позволяют увидеть остальное содержимое. Это значение учитывается, только когда документ отображается на экране компьютера; когда документ выводится, например, на бумагу, полосы прокрутки, очевидно, не имеют смысла.

Полосы прокрутки отображаются не постоянно, а только когда содержимое превышает размер элемента.

Если свойство

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

Значение свойства

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

Значения

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

Обратите внимание, что четыре значения в скобках представляют собой значения длины и должны включать спецификацию единиц измерения, например рх для пикселов. Проценты здесь не допускаются. Значения могут быть отрицательными - это будет означать, что область отсечения выходит за переделы области, определенной для элемента. Для любого из четырех значений ключевое слово

указывает, что этот край области отсечения совпадает с соответствующим краем самого элемента. Например, можно вывести только левые 100 пикселов элемента с помощью следующего атрибута :

Обратите внимание, что между значениями нет запятых, и края области отсечения задаются по часовой стрелке, начиная с верхнего края.

Данный раздел завершается примером, который демонстрирует порядок работы с большинством обсуждавшихся CSS-свойств. В примере 16.2 CSS-стили используются для создания визуального эффекта наложения полупрозрачного окна на другое окно, обладающее полосой прокрутки. Результат приводится на рис. 16.3.