1

В CSS прозрачность элемнта-родителя передается дочерним элементам: если некоторый элемент на странице имеет свойство opacity=.5, то даже при явно заданном opacity=1 дочерние элементы будут полупрозрачными.

Решение - сделать непрозрачный родительский элемент, при этом один из дочерних элементов становится псевдо-родителем. Именно ему задается свойство полупрозрачности. Соответственно, свойство не будет распространяться на другие вложенные элементы.

Есть ли варианты ограничить распространение свойство родителя на дочерние элементы без создания псевдо-родителя?

UPD. Нашлось еще одно решение - использовать псевдолементы (см. ответ ниже).

1
  • Откройте вопрос и я вам напишу ответ метод которым пользуюсь сам
    – Rules
    2 июл 2012 в 7:17

5 ответов 5

1

Есть ли варианты ограничить распространение свойство родителя на дочерние элементы без создания псевдо-родителя?

Средствами CSS - нет. Это свойство наследуется всеми потомками. Желаемого эффекта можно добиться путем позиционирования содержимого.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Позиционирование</title>
        <style type="text/css">
         section {
           position: relative;
           width: 500px;
           height: 300px;
         }
         article#Opacity {
           width: 100%;
           height: 100%;
           background-color: #eee;
           filter:alpha(opacity=50);
           opacity:0.5;
         }
         article#content {
           width: 460px;
           position: absolute;
           left: 40px;
         }
        </style>
    </head>
    <body>
        <h1>CSS Opacity</h1>
        <section>
            <article id="Opacity"></article>
            <article id="content">
              Содержимое без прозрачности.
            </article>
        </section>
     </body>
</html>
3
  • Извиняюсь, перед комментированием не посмотрел ссылку на jsfiddle.net. Там показано это же решение. Тогда остается актуальным только первая часть сообщения - штатными методами предотвратить наследование прозрачности не получится.
    – iKuzko
    27 июн 2012 в 11:28
  • 1
    @iKozuko >Средствами CSS - нет. Будем спорить?
    – Rules
    2 июл 2012 в 7:19
  • @Rulez >Будем спорить? Простите, о чем тут можно спорить ? :)
    – iKuzko
    2 июл 2012 в 8:15
1

Я задал вопрос:
Убрать прозрачность у дочерних div'ов
Идеальным оказался вариант применения RGBA (Смотреть ответ @invincible)

1
  • Ну да. Видел ваше решение было с RGBA и еще одно аналогичное(вы свое удаляли, @zloctb оставил). Технически, правильный ответ дал @iKuzko. Если фон - цвет, то решение с RGBA идеально подходит (как более простое), но если используется фоновая картинка, то лучше все-таки псевдоэлементы. 17 июл 2012 в 9:02
0

Посмотрите в сторону rgba . Вот http://htmlbook.ru/blog/poluprozrachnyy-fon ,почитайте .

1
  • Замечательное решение, только вот оно к цветам применимо только. Насколько я понял, если в блоке фоновая картинка, то прием бесполезен. 2 июл 2012 в 12:36
0

Решение с использованием псевдо-элементов:

HTML:

<div class='parent'>
  <div class='child'>Некоторый текст</div>
</div>

CSS:

.parent {
  margin: 20px;
  position: relative;
  width: 500px; height: 300px;
  border: 1px solid #000;
  background-color: #000;
}
.parent:before{
  position: absolute;
  content: '';
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: #fff;
  opacity: 0;
}
.parent:hover:before{
  opacity: .5;
}
.child {
  margin: inherit;
  position: absolute;
  width: 100px; height: 100px;
  background-color: #f00;
  color: #000;
}
0

Кроссбраузерно лучше использовать прозрачную картинку.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.