|
Почему я решила написать о том, как сделать непрозрачный текст на прозрачном фоне? При помощи css, заметьте. Есть несколько рецептов в рунете нашем — то есть один рецепт в нескольких исполнениях. Но я ведь пишу для себя. Мне будет удобнее, чтобы этот способ — сделать непрозрачный текст на прозрачном фоне — был зафикисрован тут же, в моем виртуальном дневнике. Я очистила этот код от всего лишнего, чтобы явно была видна идея этого простого и хитроумного трюка. Итак. Хотим добиться, чтобы на фоне красных цветов по полупрозрачной белой подложке шел внятный черный текст. Как на картинке. 
Пишем html: <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>neprozrachnyj text</title>
<link href="/style.css" rel="stylesheet" type="text/css" /></head>
<body>
<div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE
</div>
</div>
</body>
</html> Как видите, здесь текст не стоит в контейнере transparent, контейнер transparent ничем не заполнен. Он дает прозрачность, но на цвет текста не влияет. Пишем css: body {
background: url('/red_flowers.jpg') fixed top center;
}
#content {
position:relative;
margin: 0 auto;
width:500px;
height: 500px;
color:#000;
overflow:hidden;
}
#transparent {
opacity:0.7;
filter:alpha (opacity=70);
-moz-opacity:0.7;
background-color:#fff;
width:500px;
height:2500px;
position:absolute;
}
#text{
position:relative;
padding: 10px;
} Для контейнера transparent задается патологически большая высота, а внешний для него сontent делаем нужной высоты, я для наглядности поставила 500px. Излишки сontent (навязанные прозрачным дивом) скрываем: overflow:hidden; Контейнер для текста небогат качествами, но необходим для нашего волшебства. Я вижу в решении этой задачи некую магию, как и вообще в верстке: пишешь буковки в блокноте, а получается настоящая картина. Те, кто верстает в дримвивере или еще в чем-то подобном, лишают себя чистого удовольствия вдыхать разреженный воздух высокой абстрактности. Мой выбор инструмента для верстки — Notepad++ !!! Эту конструкцию - непрозрачный текст на прозрачом фоне - можно скачать по ссылке. Примечание для ie: здесь, как обычно, все не как у людей. Если у нас внутри блока text какая-то сложная конструкция — скажем, в две или в три колонки — нужно каждой содержательной части приписать значение position:relative; — иначе в ie вся красота нарушится. В других браузерах достаточно приписать это контейнеру text, и все внутренние блоки унаследуют и эту позицию, и непрозрачный текст, а вот в ie если не пропишешь каждому внутреннему блоку position:relative; — непрозрачный текст на прозрачном фоне не увидишь. Век живи — век учись! Из всех браузеров именно ie дает возможность верстальщику почувствовать себя победителем. Разве нет? |
