| |
|
|
| | Я вас категорически приветствую товарищи!!! В общем такая проблема. Есть див в диве. У дива отца стоит прозрачность 0.5( opacity: 0.5;), но к сожалению эта же прозрачность передается и дочерним дивам. Как сделать так что бы дочерним дивам прозрачность не передавалась? Просто по большому счёту зачем непрозрачные дивы, в полупрозрачном. Но вот понадобились, так как видеоплеер VK становится прозрачным в след за дивом в котором лежит, удивительное зрелище (((( Принудительное выставление нужных параметров в таблице стилей, к сожалению не помогло.
С уважением к вам, вашему опыту и труду!!! | |
| |
|
|
| |
|
|
| |
для: hk416
(12.11.2012 в 23:14)
| | | Хм.... А что, тут никто ничего не подскажет?
Я тоже сталкивался с такой бедой и как победить не нашел способа =( | |
| |
|
|
| |
|
|
| |
для: Sfinks
(14.11.2012 в 10:15)
| | | Узнаете положение родителя, позиционируете дочерний элемент абсолютно на позицию родителя, плюс смещение элемента в родителе. По окончании необходимости сей операции возвращаете дочернему элементу относительное позиционирование. | |
| |
|
|
| |
|
|
| |
для: confirm
(14.11.2012 в 10:54)
| | | Ну да, так и приходилось выворачиваться - сменой родителя. | |
| |
|
|
| |
|
|
| |
для: Sfinks
(14.11.2012 в 11:56)
| | | Если родитель, это всего лишь слой определенного цвета, то можно и оставлять относительную позицию дочернего элемента, обрамляя его по краям слоями, которым и указываем степень прозрачности, а родителю отсутствие фона. | |
| |
|
|
| |
|
|
| |
для: Sfinks
(14.11.2012 в 10:15)
| | | а "супротив лома нет приёма"- это давно известно :)
желание иметь "непрозрачного ребёнка" в "прозрачном родителе" равносильно желанию нырнуть с головой в воду, но так, чтобы трусы остались сухими
и это ни у кого ещё не получалось и никогда не получится
так что "беда" - она не в HTML+CSS+JS
эта "беда" - она в голове тех, кто такие "задачи/проблемы" перед собой ставит :( | |
| |
|
|
| |
|
|
| |
для: ЯСА
(14.11.2012 в 11:31)
| | | У меня такая "задача/проблема" возникла, когда я попытался на все окно браузера нарисовать полупрозрачную подложку, а в центре DIV-окошко с уведомлением. Решил, как и написали выше, сделав родителем обоих BODY.
А в чем принципиальная разница между свойством "прозрачность" и любым другим, например "цвет рамки"?
Почему метафора именно "нырнуть", а не, скажем, намазать кремом от загара?
И какие, тогда, еще свойства стиля невозможно не унаследовать? | |
| |
|
|
| |
|
|
| |
для: Sfinks
(14.11.2012 в 12:01)
| | | >"И какие, тогда, еще свойства стиля невозможно не унаследовать?"
есть такое английское слово - inherited
по-русски оно звучит немного неприлично - "инхЕритед"
переводится как "наследование"
каждое свойство стиля - оно либо "инхЕрит", либо "НЕинхЕрит"
узнать о каждом свойстве стиля можно на сайте w3c
кликните там по интересующему вас свойству и в самой первой табличке четвёртой строкой будет написано:
либо Inherited: yes
либо Inherited: no
|
аналогичная информация по каждому CSS-свойству имеется у Мелкософта и у Мозиллы
------
но, в принципе, указанная выше информация - она при здравом и логичном уме не нужна
я как бы САМ могу догадаться, что если я дам внешнему <DIV>'у некий цвет фона - например, голубой - то абсолютно все входящие в этот <DIV> плайн-теги тоже будут... этой же нетрадиционной ориентации :)
а вот если я этот внешний <DIV> заключу в рамку (установлю ему бордер), то я опять же как бы САМ вполне догадаюсь, что на все внутренние теги это свойство распространяться не будет... | |
| |
|
|
| |
|
|
| |
для: ЯСА
(14.11.2012 в 13:56)
| | | Так ведь речь не о наследовании, а о невозможности изменить унаследованное свойство.
Вот код:
<!--<?--><html>
<body style="background-color:#555">
<div style="background-color:yellow;height:500px"></div>
<div style="position:absolute;left:0;top:0;width:500px;height:200px;background-color:blue;">
<div style="position:absolute;left:100px;top:50px;width:300px;height:100px;border:solid red 1px;">
</div>
</div>
<div style="position:absolute;left:0;top:200px;width:500px;height:200px;background-color:blue;">
<div style="position:absolute;left:100px;top:50px;width:300px;height:100px;background-color:red;">
</div>
</div>
<div style="position:absolute;left:0;top:400px;width:500px;height:200px;background-color:black;opacity:0.5;">
<div style="position:absolute;left:200px;top:0px;width:100px;height:200px;background-color:green;opacity:1;"></div>
<div style="position:absolute;left:100px;top:50px;width:300px;height:100px;background-color:white;opacity:1;"></div>
</div>
</body>
</html>
|
Вы привели в качестве примера цвет фона...
Да, по умолчанию он наследуется. Видим это в первом диве.
Но если у дочернего дива изменить цвет фона, то он изменится, как мы видим во втором диве.
А прозрачность дочернего элемента изменяется и не просвечивается, но только по отношению к родителю.
А по отношению к прародителю еще и умножается на прозрачность родителя, в результате все равно просвечивает.
Забавно. | |
| |
|
|
| |
|
|
| |
для: Sfinks
(14.11.2012 в 10:15)
| | | Сфинкс, я нашел решение, если тебе тоже интересно, скажи, я напишу решение. Оно гениальное и простое. | |
| |
|
|
| |
|
|
| |
для: hk416
(14.11.2012 в 14:30)
| | | Хорошим тоном на форуме считается показать решение своей проблемы, даже если вы нашли его сами. Вдруг еще кому-то пригодится. Тем более, если оно "гениальное и простое". | |
| |
|
|
| |
|
|
| |
для: hk416
(12.11.2012 в 23:14)
| | | Можно использовать CSS3-значение цвета rgba для родителя вместо opacity. Не очень кроссбраузерно [url](http://htmlbook.ru/css/value/color[/url]), но альфа-канал таки не наследуется. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(14.11.2012 в 17:26)
| | | Да, это хороший вариант. Мне нравится =) | |
| |
|
|
| |
|
|
| |
для: Sfinks
(14.11.2012 в 18:06)
| | | Ну вообще то это и есть моё решение и оно кроссбраузерно если одно НО, для IE8 и ниже нужно дополнительно несколько строчек написать в условных комментариях. Вот сайт на котором это отлично рассказывается http://www.xiper.net/collect/html-and-css-tricks/css-tricks/rgba.html Так что теперь вы на будущее знаете как этим пользоваться. И то что это работает практически во всех браузерах, я лично проверил. | |
| |
|
|
