Добиться прозрачности можно с помощью графики в формате PNG – сохранив ваши изображения в формате 24-битного PNG, можно реализовать эффект прозрачности и полупрозрачности. Изображения в формате GIF также поддерживают прозрачность, однако при сохранении необходимо добавить к нему кромку (matte) – цвет, сходный с цветом фона, на котором оно будет расположено.

Создать изображение GIF с поддержкой прозрачности, одинаково отображаемое на различном фоне, очень сложно с технической точки зрения. Для этого, как правило, нужно разделить изображение на два и сохранить каждое из них отдельно, а затем вновь собрать их воедино на странице. Этот подход отдает чем-то совершенно дремучим, чего следует избегать при верстке документа с помощью CSS. Прокрутка контента с изображением в формате GIF над зафиксированным фоном приводит к возникновению «эффекта гало» (ореола), что выглядит не очень красиво. На рис. 3.14 мы видим и проявление прозрачности, но также видим и проявление нежелательного «эффекта гало».

Рис. 3.14. Нежелательный «эффект гало»

 Решение
В примере на рис. 3.15 использовано два изображения в формате PNG. Первое из них используется вместо белого фона элемента #content. Это десятипиксельное изображение было создано в Photoshop. К прозрачному изображению был добавлен новый слой белого цвета, степень прозрачности которого была уменьшена до 40%. Полученное изображение было сохранено в формате 24-битного PNG с именем opaque.png.

Второе изображение в формате 24-битного PNG с прозрачным фоном служит для замещения фонового изображения xoops.gif. Мне хотелось бы закрепить его в правом верхнем углу окна (с помощью декларации background-attachment: fixed), чтобы оно оставалось неподвижным при прокрутке страницы. Если бы вместо него использовалось изображение в формате GIF (с кромкой темно-синего цвета), то при движении оно оказалось бы над светлым фоном и возник описанный выше «эффект гало».

Достигнутый с помощью CSS эффект представлен на рис. 3.15:

Рис. 3.15. Использование фонового изображения без «эффекта гало» для картинки с надписью XOOPS

body {
font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
background-image: url(xoops.png);
background-repeat: no-repeat;
background-position:98% 2%;
background-attachment:fixed;

margin: 0;
padding: 46px 0 0 0;
}
#content {
margin: 0 4em 2em 4em;
background-image: url(opaque.png);
padding: 1em 50px 40px 1em;
}

Обсуждение
С помощью полупрозрачных изображений в формате PNG можно добиться совершенно невероятных привлекательных эффектов. Но, к сожалению, браузер Internet Explorer 6 не обеспечивает должной поддержки их использования.

Однако, тщательно продумав все аспекты верстки вашей страницы, чаще всего можно найти решение, позволяющее создать такого рода эффект для пользователей более современных браузеров, таких как
Firefox, Safari, Opera и Internet Explorer версий 7 и выше. Кроме того, ограничения Internet Explorer 6 можно обойти с помощью JavaScript.

Я расскажу об этом методе в главе 7.