полупрозрачный фон div'а

theo_ · September 8, 2009

Хочется, чтобы под фоном div'a был виден фон body

Как такое сделать?

Следующий код не работает нигде, что тут не так?

html:

<body>
  <div class="opacity_div">
	 ...
  </div>
</body>

css:

body {
  background: url(/img/bg.jpg);
}
.opacity_div {
  background: #FFF;
  opacity: 0,3;
}

mishka · September 8, 2009

.opacity_div {
  background: #FFF;
  opacity: 0,3;
}

а точку ставить не пробовали?

opacity: 0.3;

psywalker · September 8, 2009

Вот те для примера:

  div.opacity{
	  background: url(img1.jpg);
	  height: 200px;
	  width: 400px;
	  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
	  filter:alpha(opacity=30); /* IE +*/
	  -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
	  -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
	  opacity: 0.4; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
	  }

theo_ · September 9, 2009

спасибо огромное лучше даже не писать сколько времени я искал в чем проблема....

а как сделать, чтобы элементы, находящиеся в данном блоке, не были прозрачными?

задаю opacity: 1 для них - не помогает

BassEast · September 9, 2009

в данном случае тогда, всё будет прозрачным.. и текст, который будет находится в диве, и картинки. Я бы лучше пустил это всё дело полупрозрачным PNG background.

Searcher · September 9, 2009

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

rash · September 9, 2009

IE нужен? Если да, то или делать это двумя разными блоками и размещать один над другим, или использовать png.

Если не нужен - можно намного проще :-)

theo_ · September 9, 2009

спасибо большое за советы

решил сделать с помощью png, но в ie 6 столкнулся с проблемой

есть div шириной 600px, высота зависит от контента. никак не получается залить его png

использую для исправления png в ie этот способ (v2.0): http://www.twinhelix.com/css/iepngfix/

general-css:

.item_border {
  width: 600px;
  overflow: hidden;
  background: url(/img/opacity_bg.png) repeat-y;
}

iefix.css

.item_border {
  behavior: url('/iepngfix.htc');
}

есть у кого рабочие примеры png в ie6 с repeat-y?

заранее спасибо

Searcher · September 9, 2009

...о чем вам и говорили. Если нужен ИЕ, то лучше сделать блоками.

psywalker · September 9, 2009

А чем тебе не понравился способ господина Searcher ?

http://forum.htmlbook.ru/index.php?s=&...st&p=113555

аа, у тебя высота произвольная и меняется в зависимости от количества содержания чтоли?

Edited September 9, 2009 by psywalker

BassEast · September 9, 2009

есть у кого рабочие примеры png в ie6 с repeat-y?
заранее спасибо

Качайте » . Пользуйтесь.

psywalker · September 9, 2009

А вот я набросал пример, чем он плох?

http://psywalker.ru/Forum/opacity/main-2.html

Searcher

...о чем вам и говорили. Если нужен ИЕ, то лучше сделать блоками.

А что значит сделать блоками, покажи пожалуйста пример

Edited September 9, 2009 by psywalker

Searcher · September 10, 2009

А вот я набросал пример, чем он плох?
http://psywalker.ru/Forum/opacity/main-2.html
Searcher
А что значит сделать блоками, покажи пожалуйста пример

Спасибо, psywalker! Я собственно и имел ввиду такой вариант. Ну, только во многих случаях можно и без expression обойтись, просто указать высоту и ширину в 100%.

Собственно, для нефиксированной высоты это оптимальный вариант, хотя я редко встречаю полупрозрачный фон у тянущихся элементов... Была одна страничка: http://www.milkywaygalaxy.ru/page/2/ но что-то она сейчас недоступна...

psywalker · September 10, 2009

Спасибо, psywalker! Я собственно и имел ввиду такой вариант. Ну, только во многих случаях можно и без expression обойтись, просто указать высоту и ширину в 100%.
Собственно, для нефиксированной высоты это оптимальный вариант, хотя я редко встречаю полупрозрачный фон у тянущихся элементов... Была одна страничка: http://www.milkywaygalaxy.ru/page/2/ но что-то она сейчас недоступна...

Мастер, во первых я упростил свой пример: http://psywalker.ru/Forum/opacity/main-2.html, а во вторых прошу тебя, если не сложно покажи способ без Экспрешанов

Searcher · September 10, 2009

Может я не очень точно выразился... Если не указана высота родителя, я не знаю способа для ИЕ без экспрешанов. Я говорил, что в большинстве случаев высота родителя указана в стилях. Пока редко встречаются макеты с полупрозрачным фоном какого-либо элемента неизвестной высоты.

psywalker · September 10, 2009

Может я не очень точно выразился... Если не указана высота родителя, я не знаю способа для ИЕ без экспрешанов. Я говорил, что в большинстве случаев высота родителя указана в стилях. Пока редко встречаются макеты с полупрозрачным фоном какого-либо элемента неизвестной высоты.

понял тебя, а я уже было обрадовался, что стану обладателем интересного способа

theo_ · September 10, 2009

еще раз спасибо всем

сделал вот этим способом

Качайте » . Пользуйтесь.

psywalker · September 10, 2009

еще раз спасибо всем
сделал вот этим способом

ну может кстати и правильно, мне самому этот фикс очень понравился, даже больше чем...

BassEast · September 11, 2009

Может я не очень точно выразился... Если не указана высота родителя, я не знаю способа для ИЕ без экспрешанов. Я говорил, что в большинстве случаев высота родителя указана в стилях. Пока редко встречаются макеты с полупрозрачным фоном какого-либо элемента неизвестной высоты.

И всё-таки они есть

Searcher · September 11, 2009

И всё-таки они есть

тогда по мне лучше пару экспрэшенов, чем мудреные пнг-фиксы...

а скоро ИЕ6 вообще уйдет в небытие

psywalker · September 11, 2009

тогда по мне лучше пару экспрэшенов, чем мудреные пнг-фиксы...
а скоро ИЕ6 вообще уйдет в небытие

Вот кстати я про тоже и имел ввиду, ПНГ фикс - это как бы не спортивное решение, да и потом сама суть в том, что с помощью "Opacity" можно руководить полупрозрачностью в разных браузерах

BassEast · September 11, 2009

тогда по мне лучше пару экспрэшенов, чем мудреные пнг-фиксы...
а скоро ИЕ6 вообще уйдет в небытие

у экспрешонов большой минус - они не совсем гибкие и занимают кучу кода даже если их и два.

psywalker · September 11, 2009

у экспрешонов большой минус - они не совсем гибкие и занимают кучу кода даже если их и два.

Интересно, в чём же выражается гибкость?

А потом ты сравни их с твоим JS фиксом, разве он меньше?

тогда по мне лучше пару экспрэшенов, чем мудреные пнг-фиксы...
а скоро ИЕ6 вообще уйдет в небытие

Когда? недавно смотрел статистику, отлично держится собака, всё теже 14%

Edited September 11, 2009 by psywalker

BassEast · September 11, 2009

Интересно, в чём же выражается гибкость?
А потом ты сравни их с твоим JS фиксом, разве он меньше?

гибкость выражается в том, чтобы не заморачиваться на scale и crop.

Использовать один, пусть даже и по-больше скрипт, но который позволит использовать png в IE практически так же просто, как и в FF.

Скрипт не меньше, но он грузится только для IE, тем самым даёт дышать CSS файлам.

Searcher · September 11, 2009

Интересно, в чём же выражается гибкость?
А потом ты сравни их с твоим JS фиксом, разве он меньше?
Когда? недавно смотрел статистику, отлично держится собака, всё теже 14%

Идеального решения нет...

Экпрешены - тот же javascript, так что загружает броузер не больше.

Экспрешены иногда подвешивают ИЕ, но это редкость.

Если фон должен иметь неоднородную прозрачность, то тут уже без png никак не обойтись.

Все png-фиксы имеют ряд ограничений.

Вобщем, умри ИЕ!!!

Сейчас с выходом новой винды все-таки должен ИЕ6 быстрее сойти на нет... Статистику, похоже, в большой степени создают довольно старые ноутбуки с Win XP. Но они должны в конце концов начать уже ломаться Я все-таки расчитываю, что в ближайший год использование ИЕ6 должно резко упасть. Но, может, я выдаю желаемое за действительное?

BassEast · September 11, 2009

Сейчас с выходом новой винды все-таки должен ИЕ6 быстрее сойти на нет... Статистику, похоже, в большой степени создают довольно старые ноутбуки с Win XP. Но они должны в конце концов начать уже ломаться Я все-таки расчитываю, что в ближайший год использование ИЕ6 должно резко упасть. Но, может, я выдаю желаемое за действительное?

у меня обычно бывает такое: если что-то долгое время не происходит и я борюсь с этим, то когда я прекращаю заниматься этим делом — всё сразу происходит и меняется в лучшую сторону . Я это к тому, что даже в интернете.. там хорошо, где нас нет.

Edited September 11, 2009 by BassEast

Sign In

полупрозрачный фон div'а

Question

Link to comment

Share on other sites

30 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information