Текст под прозрачным фоном
В большинстве случаев подобного рода изыск нужен только для того, чтобы при отключенной графике на ее месте появлялся текст.
В основном это касается шапки сайта.
Ситуация выглядит следующим образом:
- Основная часть header состоит из одного или нескольких графических файлов и имеет неоднородный фон, скажем градиент.
- На этом фоне расположен логотип – картинка или картинка с текстом на прозрачной подложке.
- Необходимо спрятать текст под логотипом.
- Логотип и текст появляющийся при отключенной графике должны быть кликабельны.
<body>
<div id="header">
<h1>
<a href="путь к главной сайта">Имя сайта</a>
<span onclick="location.href='путь к главной сайта'"></span>
</h1>
</div>
#header {
background:url(header.jpg) no-repeat;position:relative;
}
#header h1 {position:absolute;top:XXpx;left:XXpx;}
#header h1 a {font:bold XXpx Georgia;}
#header h1 span {
background:url(logo.png) no-repeat;
position:absolute;top:XXpx;left:XXpx;
}
Данный код лишь частный случай, все справедливо, если только logo.png имеет цвет подложки, совпадающий с header.jpg или в отсутствии header.jpg с его фоновой заливкой.
Скриншоты:
Нижний скриншот наглядно показывает проблему, если бы графический текст был бы выполнен на прозрачной подложке.
Возможно, решение существует и оно намного проще моего, но то, что удалось сделать за пару минут, полностью меня устроило и искать, что-либо не было необходимости.
Чип и Дейл, а вернее абсолютное позиционирование спешит на помощь.
<body>
<a class="title_site" href="путь к главной сайта">Имя сайта</a>
<div id="header">
<h1 onclick="location.href='путь к главной сайта'"></h1>
</div>
#header {
background:url(header.jpg) no-repeat;position:relative;
}
#header h1 {
background:url(logo.png) no-repeat;
position:absolute;top:XXpx;left:XXpx;
}
a.title_site {
font:bold XXpx Georgia;position:absolute;
top:XXpx;left:XXpx;
}
Для стилей в первом и во втором случае ряд параметров не указан, в частности это высота и ширина для logo.png и цвет фоновой заливки header’a.
Рейтинг популярности - на эти заметки чаще всего ссылаются:
- 155916616 position:absolute; Ликбез
- 107177366 Вертикальное раздвигающееся меню
- 105706838 Закругленные углы - градиент, html and css
- 102410024 Hack CSS for IE8
- 101509244 display:inline-block; and display:inline;
- 084061376 Фиксированные блоки на web-странице
- 078516905 max-width и min-width в IE6. Решить за 60 секунд
- 050663430 Footer всегда внизу. Личный архив
- 046487552 position:relative;overflow:hidden;border-top; Браузеры
- 035651586 Вертикальный скролл
Горизонтальный banner counters.php - width:494px;