Проблемы с прозрачностью блоков

[Hijacker]

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

html:

<div id="bg">
<div id="maintable">
	<div id="logo"> </div>
	<div></div>
</div>
</div>

css:

body {
	background: #FFFFFF url(../images/bg.jpg) bottom no-repeat;
	height:auto !important;
	height:100%;
}
#bg {
	background: #FFF;
	opacity: 0.7;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	height: 100%;
}
#maintable {
	opacity: 1.0;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); 
}
#logo {
	background: url(../images/logo.jpg) no-repeat left top;
	height: 200px; 	
}

картинка логотипа не 100% видима, как впрочем и все элементы внутри #bg, возвращение #maintable { opacity: 1.0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); } не помагает.

[psywalker]

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

[Hijacker]

прошу прощения.... никогда по слоям не раскладывал(((( какие атрибуты нужно прописать в html и css?

[psywalker]

прошу прощения.... никогда по слоям не раскладывал(((( какие атрибуты нужно прописать в html и css?

В главном контейнере нужно создать ещё один див, в который и погрузишь контент.Потом сделаешь ещё один, который и растянешь на всю высоту. И ему уже прозрачность.

[mishka]

а пнг бекграунд неподойдет?

[psywalker]

а пнг бекграунд неподойдет?

Мне, подойдёт

[Hijacker]

Мне, подойдёт

а как же Ослики до 7-й версии??? они же пнг по моему не поддерживают.

[psywalker]

а как же Ослики до 7-й версии??? они же пнг по моему не поддерживают.

А у тя ширина фикс?

И о каких осликАХ идёт речь? О 5-м и 4-м чтоли тоже?хахах

[Hijacker]

А у тя ширина фикс?

И о каких осликАХ идёт речь? О 5-м и 4-м чтоли тоже?хахах

а при чем здесь ширина? От этого что-то изменится?

И да, я о ИЕ и 4-м и 5-м и 6-м.... всё верно.

[psywalker]

а при чем здесь ширина? От этого что-то изменится?

Да, изменится

И да, я о ИЕ и 4-м и 5-м и 6-м.... всё верно.

[Hijacker]

<div id="maintable">
  <div id="mainbg"> </div>
  <div id="maincontent">
	<div id="logo"> </div>
	<div></div>
	<div id="bottom"></div>
  </div>
</div>

#maintable {
	width: 90%;
	min-width: 780px;
	max-width: 1500px;
	height: 100%;
}
#mainbg {
	background: #FFF;
	height: 100%;
	opacity: 0.7;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	position: relative;
	z-index: 1;
}
#maincontent {
	height: 100%;
	position: relative;
	z-index: 2;
}

Как теперь фон растянуть во всю высоту блока maintable? Подскажите пожалуйста!

[mishka]

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

Я незнаю как там ие4-5, (както незастал их вживых) но для ие6 пнг непроблема, так как есть фильтр

filter:progid:dximagetransform.microsoft.alphaimageloader(src='', sizingMethod='');

[Hijacker]

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

Я незнаю как там ие4-5, (както незастал их вживых) но для ие6 пнг непроблема, так как есть фильтр

filter:progid:dximagetransform.microsoft.alphaimageloader(src='', sizingMethod='');

спасибо! полезная штука.... filter:progid:dximagetransform.microsoft.alphaimageloader(src='/images/bg.png', sizingMethod=''); синтаксис правильный?

[mishka]

если в для всех написано так:

background: url(../images/bg-box.png) no-repeat;

то для ие6 нужно записать

filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/bg-box.png', sizingMethod='crop');

тоесть путь к картинке нужно писать от файла хтмл.

также sizingMethod может принимать значение "crop" или "scale"

crop - при нерипитящемся бг,

"scale" - при репитящемся,

только стоит учесть что скейл не повторяет бг, он его растягивает.

или примени джс "DD_belatedPNG"

[psywalker]

Конечно-же лучше всего воспользоваться "DD_belatedPNG" и не париться. Поддерживаю полностью.

[Justnewone]

Конечно-же лучше всего воспользоваться "DD_belatedPNG" и не париться. Поддерживаю полностью.

Траблы есть )))

Например на ховере, или, допустим большая неповторяющаяся картинка в бекграунде. Все с умом, все с умом...

[psywalker]

Траблы есть )))

Например на ховере, или, допустим большая неповторяющаяся картинка в бекграунде. Все с умом, все с умом...

Ну в принципе да, я тоже наблюдал таковые, но надо проверять сначала, и если всё путём, то пользоваться полюбас.

[Omar2002]

Столкнулся с аткой проблемой - никакие фиксы не работают в ie6 если в хедере стоят вот эти три строки:

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Если убрать первую строку, то прозрачность начинает работать в ie6:

filter: alpha(opacity=50);

Может кто сталкивался?

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

width: 100%;

Т.е. если явно проставить размеры

width: 500px; height: 300px;

, то фильтр начинает работать.

Edited April 17, 2010 by Omar2002

[stars]

А че прозрачность только на ие ориентированна??? Для оперы, фф, сафари, Konqueror другие фильтры как бы нужны...

Название у темы кстати смешное ))))) когда увидел чуть со стула не упал )))

Edited April 17, 2010 by stars

[Omar2002]

А че прозрачность только на ие ориентированна??? Для оперы, фф, сафари, Konqueror другие фильтры как бы нужны...

Название у темы кстати смешное ))))) когда увидел чуть со стула не упал )))

Во всех остальных браузерах проблемы вообще нет - там работает opacity: .5;

Проблема была именно в ie6 при XHTML 1.1

[sigma77]

Omar2002,

Насколько я помню ИЕ6 и ниже не понимают эту строчку

<?xml version="1.0" encoding="windows-1251"?>

и соответственно врубает режим совместимости и результат этого довольно непредсказуемый. Поэтому писать ее не рекомендуется.

[psywalker]

Да, это старая проблема, вообще эта строка ни к чему и использовать её вообще не надо, лишние понты. Кодировка и так понятна, без неё, а проблемы зато появляются.