Прозрачный текст на не прозрачном фоне
Доброго времени суток!
Столкнулась с проблемой, как сделать прозрачный текст на не прозрачном фоне, так чтобы через буквы просвечивался фон сайта (как в меню http://fancymind.ru/). Уточню сразу БЕЗ КАРТИНОК! Возможно ли вообще такое сделать средствами CSS + JS? и как? |
<style>
#b1, #b2 {
position: absolute;
left: 5px;
top: 5px;
width: 500px;
height: 100px;
font-size: 60px;
color: #fff;
padding: 5px;
}
#b1 {
background: red;
}
#b2 {
opacity: .5;
filter: alpha(opacity=50);
}
</style>
<div id="b1"></div>
<div id="b2">Текст</div>
|
Уважаемый отвечающий, если бы вы сначала смотрели внимательно вопрос, а потом писали, то может и ответили бы на мой вопрос. Разве при вашем варианте я могу видеть фон сзади красного дива через буквы? Нет не могу. А вопрос был в этом.
|
Цитата:
Конечно не nemo... Но законспектировать стоит! :lol: trikadin, я смог увидеть красный фон скрось эти чёртовы буквы!!! :dance: |
Может вы сначала посмотрите пример, который вам дали по ссылке, а потом будете смеяться(только видимо уже над собой)?
|
Ponomareva_AS,
Если бы вы снизили планку своего пафоса и перестали считать, что вам что то должны, то вы бы заметили, что красный див - это див с фоном, который видно через белые буквы. Для особо непонятливых смотреть сюда:
<style>
#b1, #b2 {
position: absolute;
left: 5px;
top: 5px;
width: 500px;
height: 100px;
font-size: 60px;
color: #fff;
padding: 5px;
}
#b1 {
background: url('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif');
}
#b2 {
opacity: .5;
filter: alpha(opacity=50);
}
</style>
<div id="b1"></div>
<div id="b2">Текст</div>
|
Цитата:
Цитата:
<style>
#b1 {
width: 500px;
height: 100px;
font-size: 60px;
color: #fff;
padding: 5px;
opacity: .5;
filter: alpha(opacity=50);
background: red;
}
</style>
<div id="b1">Текст</div>
P. S. И не хамейте. |
Nekromancer, теперь вы первый))
|
всё понятно ссылки смотреть никто не умеет. И читать тоже. Я не считаю, что мне кто-то должен просто эта тема может ещё кому-то пригодиться, не только мне. А вы даже не хотите понять, что нужно. Объясню ещё раз. У вас на сайте нарисована собачка, фоном сайта. На сайте же есть красный див. На нем прозрачные буквы, через которые пользователь должен видеть собачку, а не красный фон дива!!! Собачку, которая на фоне сайта! Мне надо видеть то что под красным дивом!!! Прочитайте хоть кто-нибудь внимательно уже!
|
В css масок нет на сколько я знаю, так что не получится.
SVG/Canvas и всё такое, и то не факт, что VML так же может. trikadin, Да ну можно уже на ты, что ли ) |
Ponomareva_AS, я же только что это сделал...
Вариант с собачкой:
<style>
#b1 {
position: absolute;
top: 200px;
width: 500px;
height: 100px;
font-size: 60px;
color: #fff;
padding: 5px;
opacity: .5;
filter: alpha(opacity=50);
background: red;
text-align: center;
}
</style>
<div id="b1">Йа собачко</div>
<img src="http://doggonegood.webstarts.com/uploads/DGGT_Dog.jpg">
|
Блин. Так вот что вам нужно. Тогда без картинок не получится. Приношу свои извинения.
|
Цитата:
|
Цитата:
|
в общем единственное кросбраузерное решение- картинки делать на серверной стороне
GD в помощь) |
"прозрачные буквы на непрозрачном фоне" - просто натыкалась на кучу статей и тем, где предлагали сделать прозрачными и текст и фон, как и trikadin предложил в последнем варианте. Этой фразой всего лишь хотела уточнить, что фон сам не должен быть прозрачным. А чтобы поняли, что действительно нужно специально приложила ссылку.
Спасибо за ответы, хоть и решения не нашлось. |
Кстати в ИЕ таки есть маски, даже через фильтр, чтот я забыл совсем :) Если поиграться можно сделать даже кроссбраузерно :)
|
Цитата:
|
В приципе можно bg картинку хитрым образом обработать в месте за меню, чтоб наложение 50%(30?) белого давало оригинальный цвет.
Хотя картинка для того должна быть достаточно светлой. И всё равно это бредни.) canvas и ie-filter таки смотрятся реальней.) |
Цитата:
|
devote,
Я уже выше написал, что можно даже фильтрами. Логично, что и VML`ом можно. Другой вопрос -- нафиг оно вообще надо то. |
Цитата:
|
Самый беспроигрышный вариант - либо использовать слои, либо background-color:rgba()
|
Цитата:
|
Цитата:
|
trikadin,
Я думаю он просто протупил. Из CSS свойств вроде как маску можно сделать только через -webkit-mask-*. |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 11:52. |