Jump to content
  • 0

Прозрачность

Yarus$

Asked by Yarus$,

 Share

Question

Yarus$ Explorer

Yarus$

Posted
Posted

День добрый! Столкнулся с такой проблеммой. При создании прозрачного фона таблицы (80% опасити) в середину вставляю еще 1 таблицу, и вот внутрення (далее контент) так же прозрачная, хотя я ей не задаю параметров.

Вобщем мне надо чтобы фон был прозрачным, а контент нет. Заранее спасибо

#transp { - это фон

background-color: #ffffff;

opacity: 0.80;

}

#transp2 { - это контент

clear: both;

background-color: #ffffff;

opacity: 1.0;

}

выходит так http://dakota.kiev.ua/articles/contacts.html

Link to comment
Share on other sites

27 answers to this question

Recommended Posts

  • 0
DjTarik Explorer

DjTarik

Posted
Posted
День добрый! Столкнулся с такой проблеммой. При создании прозрачного фона таблицы (80% опасити) в середину вставляю еще 1 таблицу, и вот внутрення (далее контент) так же прозрачная, хотя я ей не задаю параметров.

Вобщем мне надо чтобы фон был прозрачным, а контент нет. Заранее спасибо

#transp { - это фон

background-color: #ffffff;

opacity: 0.80;

}

#transp2 { - это контент

clear: both;

background-color: #ffffff;

opacity: 1.0;

}

выходит так http://dakota.kiev.ua/articles/contacts.html

По моему всегда так. Если родителю задать прозрачность - то и все вложенные (дочерние) элементы тоже будут иметь такую же прозрачность. Я эту "проблему" решал так - див с прозрачностью - а поверх него еще один див (накладывал с помощью позиционирования)

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
Posted (edited)
Не понял фразы, ты мне хочешь предложить какое то своё решение или что? Приведи пример :)

весь пример в это время писать влом....

Позиционируеш только div.content абсолютом с координатами 0, а в остальных блоках позиционирование нафиг не надо.

Принцип конечно тот же)

Edited by gesandte
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
весь пример в это время писать влом....

Позиционируеш только div.content абсолютом с координатами 0, а в остальных блоках позиционирование нафиг не надо.

Принцип конечно тот же)

Ага и родитель сразу же схлопывается содержа в себе абсолют, классный номер, хааха.. Короче без примера моё мнение, что ты ошибаешься :)

Приведи рабочий пример, что-бы работало в ИЕ6 тоже!

Link to comment
Share on other sites
  • 0
Semreg Explorer

Semreg

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

А display: block; не спасет?

Приведи рабочий пример, что-бы работало в ИЕ6 тоже!

Кстати opacity: 0.80; в ие6 вообще не работает. Нужно было бы добавить filter: alpha(opacity=80);

А по поводу вопроса ТС мне кажется самый простой вариант - порезать на куски и фрагмент с картой не вставлять в блок с прозрачностью.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)
А display: block; не спасет?

Кстати opacity: 0.80; в ие6 вообще не работает. Нужно было бы добавить filter: alpha(opacity=80);

А по поводу вопроса ТС мне кажется самый простой вариант - порезать на куски и фрагмент с картой не вставлять в блок с прозрачностью.

Сделанный мною вариант везде работает, включая ИЕ6 и я лично не знаю способа, который будет содержать в себе меньше блоков, соответсвовать задаче и при этом тянуться на любую длину. Ну вот появился Гуру на форуме gesandte, который говорит, что я не прав и он может выполнить эту задачу, затратив на неё меньше элементов, просто ему влом, как он говорит :) Вот я и хочу посмотреть его решение, очень интересно поглядеть :)

Кстати мой вариант: http://www.psywalker.ru/Forum/opacity/main-2.html

Edited by psywalker
Link to comment
Share on other sites
  • 0
Semreg Explorer

Semreg

Posted
Posted
Кстати мой вариант: http://www.psywalker.ru/Forum/opacity/main-2.html

Интересный вариант. Особенно понравилось как ты опасити для кучи браузеров задаешь.

Это чтож получается, что если в абсолютно позиционированный блок вложить блок с position: relative; то он не наследует прозрачность родителя?

И еще такой вопрос: на кой черт ты z-index: 1; задаешь?

А понял. Ты его поверх прозрачного блока шлепнул. Туплю )

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Semreg

1.

Интересный вариант. Особенно понравилось как ты опасити для кучи браузеров задаешь.

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

2.

Это чтож получается, что если в абсолютно позиционированный блок вложить блок с position: relative; то он не наследует прозрачность родителя?

По дефолту Opacity ненаследуемое свойство, но как ни странно не смотря на это, все его потомки всё равно перенимают прозрачность. А про абсолют и релатив - это заблуждение. Дело в том, что не важно, что во что ты вкладываешь, так как всё равно если родитель прозрачный, то дети тоже.

3.

И еще такой вопрос: на кой черт ты z-index: 1; задаешь?

А z-index:1; нужен для того, что-бы Контент лежал поверх прозрачного блока

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
Posted

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Хм) не заметил вчера, что там идет растяжение бэкграунда, по высоте в зависимости от контнета, тогда и вправду абсолютом не прокатит. Что касается 6-го осла, то срать я на него хотел.

Внимательнее надо быть, а 6-ой осёл ещё долго тебя радовать будет, как никак 14% этого говна ещё в мире ^_^

Link to comment
Share on other sites
  • 0
Yarus$ Explorer

Yarus$

Posted
  • Author
Posted

Спасибо огромное! Сделал по схеме http://www.psywalker.ru/Forum/opacity/main-2.html все супер, проверил в Опере, Мозилле, Сафари и Хроме

Вот только в ИЕ выходят косяк с положением дива...

http://dakota.kiev.ua/articles/contacts.html

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Спасибо огромное! Сделал по схеме http://www.psywalker.ru/Forum/opacity/main-2.html все супер, проверил в Опере, Мозилле, Сафари и Хроме

Вот только в ИЕ выходят косяк с положением дива...

http://dakota.kiev.ua/articles/contacts.html

Да вот тут уже дело не в примере, а в самой вёрстке, там смесь таблиц и дивов жёсткая, поэтому неудивительно что центр куда то едет. Попробуй на body повесить релатив, может поможет. А так если не выйдет, то советую красиво переверстать всё заново, уже на дивах

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Самое интересное, что тут http://dakota.kiev.ua/shop/category_4.html все норм

Там 2 движка: инет магазин и ДЛЕ. Такое ощущение что в Магазине какой-то фикс есть... А в ДЛЕ нету...

скорее всего!

Link to comment
Share on other sites
  • 0
Triumfator Explorer

Triumfator

Posted
Posted

А у меня не помогло, плюс и в Хроме, в котором нормально отображало, тоже перекосило ((

У меня таблица (фон) с эффектом прозрачности, в нее вставляю еще таблицу с заданной заливкой, она естественно тоже прозрачная.

И это не исправило

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);

opacity: .25; /* IE 5.5+*/

moz-opacity: 0.25; /* Mozilla 1.6 ? ???? */

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
А у меня не помогло, плюс и в Хроме, в котором нормально отображало, тоже перекосило ((

У меня таблица (фон) с эффектом прозрачности, в нее вставляю еще таблицу с заданной заливкой, она естественно тоже прозрачная.

И это не исправило

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);

opacity: .25; /* IE 5.5+*/

moz-opacity: 0.25; /* Mozilla 1.6 ? ???? */

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

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

Конечно же не будет работать, ты бы ещё с фреймами такую штуку промутил, делай дивами, как положено! ^_^

Link to comment
Share on other sites
  • 0
Triumfator Explorer

Triumfator

Posted
Posted
Конечно же не будет работать, ты бы ещё с фреймами такую штуку промутил, делай дивами, как положено! ^_^

Честно признаюсь, я пока только учусь. Просьба подсказать, как все же сделать.

Вот мой фон, который должен быть с прозрачностью 25% и закругленными в 5 пикс углами:

Перевел все в div, но прозрачность так и цепляет весь внутренний контент

#wrap {

background:#ffffff;

margin:0 auto;

width: 740px;

height: 843px;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);

opacity: .25; /* IE 5.5+*/

moz-opacity: 0.25; /* Mozilla 1.6 ? ???? */

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

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

}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept