Прозрачный цвет фона

Ars_Art · November 19, 2007

Подскажите пож-та, как сделать прозрачный цвет фона у DIV?

<style>
#blocks_box {
 background-color:black;
 filter:alpha(opacity=30);
 -khtml-opacity:0.3;
 -moz-opacity:0.30;
 opacity:0.30;
}
</style>

<div id="blocks_box">
 Здесь много текста...
</div>

Так не получается

elfuvo · November 19, 2007

я делал через Яву, примерно так:

 
c=50
document.getElementById('blocks_box').style.opacity=c/100;
document.getElementById('blocks_box').style.filter='alpha(opacity='+c+')';

yopopt · November 19, 2007

Подскажите пож-та, как сделать прозрачный цвет фона у DIV?

background-color: transparent; не помогает?

Fu-tai · November 19, 2007

А насколько прозрачным должен быть фон?

И должен ли он быть залит каким нить цветом.

div {
 background-color: #000; - цвет фона.
	opacity: 0.70; - степень прозрачности для пральных браузеров.
	filter: alpha(opacity=70); - степень прозрачности для неправильных браузеров.
 }

Или если нужно чтобы слой был вообще прозрачный без заливки, то действительно применяйте transparent для цвета фона.

November 19, 2007

А насколько прозрачным должен быть фон?
И должен ли он быть залит каким нить цветом.
div {
 background-color: #000; - цвет фона.
 opacity: 0.70; - степень прозрачности для пральных браузеров.
 filter: alpha(opacity=70); - степень прозрачности для неправильных браузеров.
 }
Или если нужно чтобы слой был вообще прозрачный без заливки, то действительно применяйте transparent для цвета фона.

В каких браузерах поддерживается подобное ?

Fu-tai · November 19, 2007

А я разве не написал?

Ars_Art · November 19, 2007

А насколько прозрачным должен быть фон?
И должен ли он быть залит каким нить цветом.
div {
 background-color: #000; - цвет фона.
 opacity: 0.70; - степень прозрачности для пральных браузеров.
 filter: alpha(opacity=70); - степень прозрачности для неправильных браузеров.
}
Или если нужно чтобы слой был вообще прозрачный без заливки, то действительно применяйте transparent для цвета фона.

Да, фон должен быть залит цветом и иметь прозрачность (допустим) в 30%.

Попробовал так:

div.blocks_box {
 background-color:#000;
 filter:alpha(opacity=30);
 -khtml-opacity:0.3;
 -moz-opacity:0.30;
 opacity:0.30;
}

<div class="blocks_box">
 Здесь много текста...
</div>

Так же не помогло

yopopt · November 19, 2007

Вообще должно работать, но если не работает в ие, то задайте диву ширину или высоту.

Ars_Art · November 19, 2007

Вообще должно работать, но если не работает в ие, то задайте диву ширину или высоту.

Хм...действительно помогло после как добавил:

width:100%; height:100%;

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

November 19, 2007

А я разве не написал?

НЕТ! ХОЧУ УЗНАТЬ ПРО ПОДДЕРЖКУ В:'' Explorer'' (6-7), ''Опера'', ''Мазила''(1-2)!

yopopt · November 19, 2007

Вообще должно работать, но если не работает в ие, то задайте диву ширину или высоту.
Хм...действительно помогло после как добавил:
width:100%; height:100%;
но и текст стал прозрачным вместе с фоном - это можно как-то избежать не разделяя по слоям фон с текстом?

Можно вынести текст за пределы прозрачного дива. К примеру так:

div.blocks_box {
  background-color:#000;
  filter:alpha(opacity=30);
  -khtml-opacity:0.3;
  -moz-opacity:0.30;
  opacity:0.30;
  width:100%;
  height:20px;
}

<div class="blocks_box"><!-- --></div>
<div style="position:relative;top:-20px;">Здесь много текста...</div>

Ars_Art · November 19, 2007

Можно вынести текст за пределы прозрачного дива. К примеру так:

div.blocks_box {
  background-color:#000;
  filter:alpha(opacity=30);
  -khtml-opacity:0.3;
  -moz-opacity:0.30;
  opacity:0.30;
  width:100%;
  height:20px;
}

<div class="blocks_box"><!-- --></div>
<div style="position:relative;top:-20px;">Здесь много текста...</div>

Сложно постонно вычеслять высоту, может есть еще способ (даже согласен на слои)?

Fu-tai · November 19, 2007

ну для начала обращайся к классу не через див а непосредственно к классу.

Тобишь .blocks_box а не div.blocks_box каждый браузер понимает его посвоему.

И чтобы текст не становился прозрачным нафига ты его запихал в еще один див. Лучше оформи его тегом p как и положено. Ну а если и это не поможет, то задай для .blocks_box p не прозрачность.

To 21043 - Хочешь, узнай. Читать вроде умеешь!

Ars_Art · November 19, 2007

А я разве не написал?
НЕТ! ХОЧУ УЗНАТЬ ПРО ПОДДЕРЖКУ В:'' Explorer'' (6-7), ''Опера'', ''Мазила''(1-2)!

Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9, Internet Explorer 7.

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/

filter: alpha(opacity=50); /* синтаксис IE4 */

-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */

-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */

opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

Ars_Art · November 19, 2007

ну для начала обращайся к классу не через див а непосредственно к классу.
Тобишь .blocks_box а не div.blocks_box каждый браузер понимает его посвоему.
И чтобы текст не становился прозрачным нафига ты его запихал в еще один див. Лучше оформи его тегом p как и положено. Ну а если и это не поможет, то задай для .blocks_box p не прозрачность.

Слелал так:

.inner-box {
  width:100%; height:100%;
  background-color:black;
  filter:alpha(opacity=70);
  -khtml-opacity:0.7;
  -moz-opacity:0.70;
  opacity:0.70;
}

.inner-box p {
  filter:alpha(opacity=100);
  -khtml-opacity:1.0;
  -moz-opacity:1.0;
  opacity:1.0;
}

<div class="inner-box"><p class="inner-box">Здесь много текста...</p></div>

Текст остался по-прежнему прозрачным

Что я сделал не так?

November 19, 2007

А я разве не написал?
НЕТ! ХОЧУ УЗНАТЬ ПРО ПОДДЕРЖКУ В:'' Explorer'' (6-7), ''Опера'', ''Мазила''(1-2)!
Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9, Internet Explorer 7.
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
filter: alpha(opacity=50); /* синтаксис IE4 */
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

Пребольшое спасибо

Fu-tai · November 19, 2007

ну для начала обращайся к классу не через див а непосредственно к классу.
Тобишь .blocks_box а не div.blocks_box каждый браузер понимает его посвоему.
И чтобы текст не становился прозрачным нафига ты его запихал в еще один див. Лучше оформи его тегом p как и положено. Ну а если и это не поможет, то задай для .blocks_box p не прозрачность.
Слелал так:
.inner-box {
  width:100%; height:100%;
  background-color:black;
  filter:alpha(opacity=70);
  -khtml-opacity:0.7;
  -moz-opacity:0.70;
  opacity:0.70;
}

.inner-box p {
  filter:alpha(opacity=100);
  -khtml-opacity:1.0;
  -moz-opacity:1.0;
  opacity:1.0;
}

<div class="inner-box"><p class="inner-box">Здесь много текста...</p></div>
Текст остался по-прежнему прозрачным
Что я сделал не так?

Задал p свойства класса .inner-box! Зачем для p прописал клас?

Жесть, тебе мат часть учить надо, а не прозрачностью баловаться!

Ars_Art · November 19, 2007

ну для начала обращайся к классу не через див а непосредственно к классу.
Тобишь .blocks_box а не div.blocks_box каждый браузер понимает его посвоему.
И чтобы текст не становился прозрачным нафига ты его запихал в еще один див. Лучше оформи его тегом p как и положено. Ну а если и это не поможет, то задай для .blocks_box p не прозрачность.
Слелал так:
.inner-box {
  width:100%; height:100%;
  background-color:black;
  filter:alpha(opacity=70);
  -khtml-opacity:0.7;
  -moz-opacity:0.70;
  opacity:0.70;
}

.inner-box p {
  filter:alpha(opacity=100);
  -khtml-opacity:1.0;
  -moz-opacity:1.0;
  opacity:1.0;
}

<div class="inner-box"><p class="inner-box">Здесь много текста...</p></div>
Текст остался по-прежнему прозрачным
Что я сделал не так?
Задал p свойства класса .inner-box! Зачем для p прописал клас?
Жесть, тебе мат часть учить надо, а не прозрачностью баловаться!

Да и так не выходит:

.inner-box {
  width:100%; height:100%;
  background-color:black;
  filter:alpha(opacity=70);
  -khtml-opacity:0.7;
  -moz-opacity:0.70;
  opacity:0.70;
}

.inner-box p {
  filter:alpha(opacity=100);
  -khtml-opacity:1.0;
  -moz-opacity:1.0;
  opacity:1.0;
}

<div class="inner-box"><p>Здесь много текста...</p></div>

Может ты в чем-то ошибаешься? Можешь привести пример кодом?

Fu-tai · November 19, 2007

Блин заставил таки меня самому покорежится. Ну в общем то ты прав. В данном случае вступает в силу принцип наследования свойств родителя. А вот как с этим бороться.... Предлагаю поюзать спецификацию...

Ars_Art · November 19, 2007

Fu-tai, хоть понял в чем суть происходящего Мне вот что больше интересно:

Может, кто сталкивался с данной задачей и знает, как ее решить или верный способ есть?...

Fu-tai · November 20, 2007

Вообще тема прозрачности у нас уже где-то обсуждалась.

Попробуй поискать.

Ars_Art · November 20, 2007

Вообще тема прозрачности у нас уже где-то обсуждалась.
Попробуй поискать.

Искал - не нашел подходящего мне.

psy-del · November 20, 2007

#div { opacity:0.3;} // Для нормальных БраУзеРоВ

*html #div { filter:alpha(opacity=30);} // Для ИЕ

Ars_Art · November 20, 2007

#div { opacity:0.3;} // Для нормальных БраУзеРоВ
*html #div { filter:alpha(opacity=30);} // Для ИЕ

Вот это ты к чему сказал?

Sigurt · November 21, 2007

Пару раз сталкивался с таким, что ставишь в див фоном png 1x1 px с нужным уровнем прозрачности. А с пнг где то были статейки

Gatanoa · November 21, 2007

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

Sign In

Прозрачный цвет фона

Question

Link to comment

Share on other sites

46 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