Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > прозрачный div

Автор: lasalexx 27.12.2006, 23:15

можно ли сделать div с прозрачным фоном (opacity=40), но что б текст в div е оставался непрозрачным. Или для этого обязательно 2 div а накладывать друг на друга?

Автор: SamDark 28.12.2006, 10:01

lasalexx,
Можно. Знаю решение, если браузер держит PNG.

Автор: lasalexx 28.12.2006, 17:58

Цитата

Можно. Знаю решение, если браузер держит PNG.

Как? Если не секрет smile

Автор: SamDark 29.12.2006, 10:56

lasalexx,
Рисуем PNG нужного цвета с прозрачностью 40%. Далее используем CSS:

Код


#ourdiv{
   background: url(bg.png);
}

Автор: Deja_Vu 17.6.2007, 00:12

Код


<style type="text/css">
#shade {position: absolute; top: 100px; left: 100px; filter: "alpha(Opacity=60, Style=0)"; background: gray; text-align: center; vertical-align: middle;  height: 3em; width: 10em; border: 1px solid}
#text {position: absolute; top: 100px; left: 100px; font-size: 1em; text-align: center; vertical-align: middle; height: 3em; width: 10em; border: 1px solid;}
</style>

<div id="shade">&nbsp;</div>
<div id="text">FILTER!</div>

Вот тебе решение. Правда позиционировать тяжело.

Автор: WebDisaster 22.6.2007, 19:56

Можно теперь и я встряну? =)

Вот это: filter: "alpha(Opacity=60, Style=0)"; - работает только в IE
Чтобы получить прозрачность в Мозилах добавляем плюс к этому: -moz-opacity: .6;
В Операх работать не будет ничего :(
Про Safari - чесна - не знаю smile

Автор: z-END 22.6.2007, 20:42

Цитата(WebDisaster @ 22.6.2007, 20:56

)

В Операх работать не будет ничего :(

хто здесь?!

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Вот тебе прозрачность</title>
<style>
img {
    _filter: alpha(opacity=50); 
    -moz-opacity: 0.5;  
    opacity: 0.5; 
}
img:hover {
    _filter: alpha(opacity=100); 
    -moz-opacity: 1;  
    opacity: 1; 
}
</style>
</head>
<body>
<img src="http://forum.vingrad.ru/style_images/2/menu/menu_forum.gif" alt="">
</body>
</html>

Работает в опере ИЕ, лисе

Автор: WebDisaster 22.6.2007, 20:54

Ай! Дяденька, не бейте! Работать не будет ничего из написанного раньше. А такой простой вариант как-то даже не попадался =)

Автор: hAhol13 17.10.2011, 12:42

Тема старая, но чтоб не создавать новую.. Можно ли как-то перекрыть флэш прозрачным дивом? Непрозрачным - на ура, но как только изменяю состояние прозрачности хоть на 1%, флэш вылетает наверх.

Флэш подключен с wmode=opaque (с transparent точно так же). Прозрачный див содержит в себе менюшку. Прозрачность создавалась png-файлами и описанными выше через альфу.

Автор: SelenIT 17.10.2011, 20:35

А нафиг альфа-фильтр, когда png-фон уже полупрозрачен, а IE6 успешно вымер?

Добавлено через 4 минуты и 57 секунд
P.S. По сабжу современное решение задачи — http://www.xiper.net/collect/html-and-css-tricks/css-tricks/rgba.html (с костылем для IE8- в виде той же старой доброй PNG-шки либо фильтра для градиентов). HTTP-запросы нужно экономить smile

Автор: hAhol13 18.10.2011, 04:21

Ок, спасибо за ссылку. Что-то до этого не добрался. Но начинаю понемногу приходить к мысли что перекрыть флэш-контент можно только непрозрачным дивом.

rgba-заливка тоже прячется под флэш, несмотря на вмод флэша.

Автор: SelenIT 18.10.2011, 11:21

Насколько помню, еще в 2005-м проблем с перекрытием флеша полностью прозрачной блочной ссылкой уже не наблюдал. Можно ссылку на проблемную страницу?