распространение непрозрачности - PullRequest
Новая
       2

распространение непрозрачности

1 голос
/ 09 октября 2010

У меня проблема. Я хочу прозрачный фон для содержимого div. Но не весь контент в нем. Я не могу заставить это работать: 

<div class="notTransparent"> <div class="transparent"></div> content </div>

Есть ли еще работа вокруг?

Ответы [ 3 ]

3 голосов
/ 09 октября 2010
1 голос
/ 09 октября 2010

Я думаю, что делал это раньше (хотя это было давным-давно). То, что вы делаете, - это деление с отображением: относительное, затем еще одно деление с отображением: абсолютное, слева: 0px, сверху: 0px, ширина: 100% и высота: 100%. Возможно, примените z-index: -10 (чтобы оставить это позади всего другого контента). Затем у вас будет содержимое в верхнем уровне (относительном) div, как обычно. Дайте мне несколько минут, и я разработаю код для вас ...

Хорошо, сделайте это - попробуйте следующее: 

.transparent {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.opaque {
    position: relative;
}
.content {
    position: absolute;
    left: 10px;
    top: 10px;
}

<div class="opaque">
    <div class="transparent">
        <img src="/Images/header1.png"/>
    </div>
    <div class="content">
        Hello world!
    </div>
</div>

К сожалению, я не могу найти способ поместить относительный элемент поверх прозрачного элемента div. Если кто-то найдет способ, вставьте код здесь. Кстати, нет нужды указывать z-индексы.

0 голосов
/ 09 октября 2010

Некоторое время назад я также столкнулся с проблемами наследования с прозрачностью, это помогло мне: http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack ( demo ).

...