Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.12.2011, 21:51
Интересующийся
Отправить личное сообщение для Ponomareva_AS Посмотреть профиль Найти все сообщения от Ponomareva_AS
 
Регистрация: 09.08.2011
Сообщений: 23

Прозрачный текст на не прозрачном фоне
Доброго времени суток!
Столкнулась с проблемой, как сделать прозрачный текст на не прозрачном фоне, так чтобы через буквы просвечивался фон сайта (как в меню http://fancymind.ru/). Уточню сразу БЕЗ КАРТИНОК! Возможно ли вообще такое сделать средствами CSS + JS? и как?
Ответить с цитированием
  #2 (permalink)  
Старый 15.12.2011, 21:58
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

<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>
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #3 (permalink)  
Старый 15.12.2011, 22:05
Интересующийся
Отправить личное сообщение для Ponomareva_AS Посмотреть профиль Найти все сообщения от Ponomareva_AS
 
Регистрация: 09.08.2011
Сообщений: 23

Уважаемый отвечающий, если бы вы сначала смотрели внимательно вопрос, а потом писали, то может и ответили бы на мой вопрос. Разве при вашем варианте я могу видеть фон сзади красного дива через буквы? Нет не могу. А вопрос был в этом.
Ответить с цитированием
  #4 (permalink)  
Старый 15.12.2011, 22:08
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Ponomareva_AS
Разве при вашем варианте я могу видеть фон сзади красного дива через буквы? Нет не могу. А вопрос был в этом.
Это шедевр!
Конечно не nemo... Но законспектировать стоит!

trikadin, я смог увидеть красный фон скрось эти чёртовы буквы!!!
Ответить с цитированием
  #5 (permalink)  
Старый 15.12.2011, 22:12
Интересующийся
Отправить личное сообщение для Ponomareva_AS Посмотреть профиль Найти все сообщения от Ponomareva_AS
 
Регистрация: 09.08.2011
Сообщений: 23

Может вы сначала посмотрите пример, который вам дали по ссылке, а потом будете смеяться(только видимо уже над собой)?
Ответить с цитированием
  #6 (permalink)  
Старый 15.12.2011, 22:15
Аватар для Nekromancer
Профессор
Отправить личное сообщение для Nekromancer Посмотреть профиль Найти все сообщения от Nekromancer
 
Регистрация: 06.05.2009
Сообщений: 1,163

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>
__________________
Нужно равняться на лучших, а не оправдываться за счёт худших.
Ответить с цитированием
  #7 (permalink)  
Старый 15.12.2011, 22:19
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Сообщение от Ponomareva_AS
прозрачный текст на не прозрачном фоне
Сообщение от Ponomareva_AS
фон сзади красного дива через буквы? Нет не могу.
И не должны, мадемузель. Вы же сами попросили - прозрачные буквы на непрозрачном фоне. В моём примере выполнены оба условия. В следующий раз сначала определитесь, чего вы хотите, а потом спрашивайте.

<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. И не хамейте.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #8 (permalink)  
Старый 15.12.2011, 22:19
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Nekromancer, теперь вы первый))
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #9 (permalink)  
Старый 15.12.2011, 22:25
Интересующийся
Отправить личное сообщение для Ponomareva_AS Посмотреть профиль Найти все сообщения от Ponomareva_AS
 
Регистрация: 09.08.2011
Сообщений: 23

всё понятно ссылки смотреть никто не умеет. И читать тоже. Я не считаю, что мне кто-то должен просто эта тема может ещё кому-то пригодиться, не только мне. А вы даже не хотите понять, что нужно. Объясню ещё раз. У вас на сайте нарисована собачка, фоном сайта. На сайте же есть красный див. На нем прозрачные буквы, через которые пользователь должен видеть собачку, а не красный фон дива!!! Собачку, которая на фоне сайта! Мне надо видеть то что под красным дивом!!! Прочитайте хоть кто-нибудь внимательно уже!
Ответить с цитированием
  #10 (permalink)  
Старый 15.12.2011, 22:30
Аватар для Nekromancer
Профессор
Отправить личное сообщение для Nekromancer Посмотреть профиль Найти все сообщения от Nekromancer
 
Регистрация: 06.05.2009
Сообщений: 1,163

В css масок нет на сколько я знаю, так что не получится.
SVG/Canvas и всё такое, и то не факт, что VML так же может.

trikadin,
Да ну можно уже на ты, что ли )
__________________
Нужно равняться на лучших, а не оправдываться за счёт худших.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 12:03
Вопрос: И опять про offsetLeft... sigurd Общие вопросы Javascript 11 04.10.2010 14:06
lastChild работает в IE, как тут быть? Puaris83 Firefox/Mozilla 4 17.04.2010 23:56
Вопрос по относительному позиционированию DIV XPOMOB (X)HTML/CSS 11 15.07.2009 17:02