Прозрачные подписи с непрозрачным текстом

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

Проблемы, связанные с непрозрачностью слоев z-index

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

Начнем с основного блока div, чтобы задать для нашего изображения позиционирующий родительский элемент. Изображение помещено в блок div, для которого задано position:absolute с z-index равным 10. Для div, который содержит подпись, задано position:absolute и bottom:0. А также соответствующая высота и цвет фона: RGB (100, 0, 0). Для этого div также задано значение opacity: 0.6, чтобы основное изображение просматривалось под ним. Тем не менее, текст использует ту же непрозрачность и выглядит ужасно:

Ключом к решению данной проблемы является использование цветовой схемы rgba() из CSS3. Она включает в себя параметр альфа-канала для настройки прозрачности/непрозрачности указанного цвета.

В rgba добавляется четвертый параметр, который задает transparent CSS элемента. Как и в случае со свойством CSS opacity, альфа-канал принимает значения от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Как видно на втором изображении, через фон подписи просматривается основное изображение, но текст выводится непрозрачным. Благодаря чему он легко читается. CSS-код, который я использовал:

.rdCaptionBox { margin:0 auto; padding:0; position:relative; top:0; left:0;
                 z-index:10; width:384px; height:256px; }
 .rdCaption { position:absolute; bottom:0; left:0; padding:4px; width:376px; height:26px;
              background-color:rgba(100, 0, 0, .6); z-index:11; }
 .rdCaptionText { margin:0; padding:0; z-index:11; text-align:center; opacity:1;
                  font-family:Georgia,serif; font-style:italic; font-size:1.6em;
                  font-weight:bold; color:white; }

Мы начинаем с блока div с классом "rdCaptionBox", который задает настройки шрифта. Далее идет тег img, а затем другой блок div (с классом "rdCaption"). Для него задано position:absolute и z-index, чтобы расположить его поверх изображения. А также цвет фона с помощью rgba, чтобы задать прозрачность.

К сожалению, Internet Explorer начал поддерживать RGBA-цвета только с версии 9.0, которая на данный момент используется только небольшой частью пользователей. Поэтому лучше добавить значение свойства opacity с помощью условного тега в комментариях !--[if lt ie 9], чтобы задать непрозрачность для старых версий Internet Explorer, при этом не затрагивая отображение в других браузерах.

CSS и HTML-код, используемый для создания этого эффекта, очень прост. Мы установили контейнер div с заданным для свойства position значением relative. Для top и left то, что вам нужно (обычно 0), и базовые значения z-index. Внутри этого блока div добавляется элемент, который будет отображаться на изображении. А также div с классом "rdCaption", который будет содержать текст подписи. Для него задано position:relative, а также z-index со значением больше, чем у контейнера. Самой важной настройкой является установка background transparent CSS фона с помощью rgba():

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

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

Согласно данным Statcounter, примерно 10% пользователей по-прежнему используют Internet Explorer версий 6, 7 или 8. Ни одна из них не поддерживает CSS 3 и background image transparent CSS. Эти пользователи должны учитываться при разработке сайтов для массового рынка.

Я включил специальные настройки стилей для старых версий IE, а также IE9+, чтобы во всех версиях созданные элементы отображались наилучшим образом.

Internet Explorer: Существует несколько групп разработчиков, работающих над программным обеспечением, которое добавляет поддержку многих функций CSS3 в старые версии Microsoft Internet Explorer. У меня остались наилучшие впечатления от работы с PIE - Progressive Internet Explorer. Если необходимо обеспечить поддержку старых версий Internet Explorer, я рекомендую PIE:

CSS3 позволяет использовать градиенты для фоновых изображений. На данном изображении я заменил равномерно полупрозрачный фон другим, который постепенно исчезает до полной прозрачности. Для этого эффекта сложно обеспечить обратную совместимость со старыми версиями Internet Explorer из-за уникальных графических фильтров компании Microsoft, которые необходимы для создания градиентов.

У вас могут возникнуть проблемы при получении непрозрачного текста. Этот эффект часто достигается за счет использования фонового PNG-изображения с настройками color transparent CSS градиента. Поскольку Internet Explorer поддерживает PNG, начиная с версии 7, такой фоновый рисунок будет поддерживаться автоматически:

.rdCaptionGrad { position:absolute; top:0px; left:0; padding:4px;
     width:376px; height:32px; color:white; z-index:11;
     background-image:-ms-linear-gradient(to bottom, rgba(100, 0, 0, 1) 10%, rgba(100, 0, 0, .8) 40%,
       rgba(100, 0, 0, .5) 70%, rgba(100, 0, 0, 0) 96%);
     background-image:linear-gradient(to bottom, rgba(100, 0, 0, 1) 10%, rgba(100, 0, 0, .8) 40%,
       rgba(100, 0, 0, .5) 70%, rgba(100, 0, 0, 0) 96%);
   }