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

Question

Хорошо, вот и сделка. У меня есть страница, которую я создаю в HTML и CSS. У меня есть div, фон которого должен быть прозрачным. Однако, когда я использую opacity: .6; Все в div проходит до конца.

Есть ли способ исправить это, чтобы он работал в Safari, IE и Firefox?

Answer 1

Нет, нет реального способа решить эту проблему (хотя вы можете это сделать в CSS3). Есть два возможных подхода:

1) Используйте прозрачный фон png вместо того, чтобы делать это с CSS (с хаки для IE6, которые не позволяют прозрачные pngs)

2) Используйте два отдельных элемента div и используйте абсолютное позиционирование, чтобы расположить один поверх другого. Это требует знания определенных измерений, поэтому может не всегда применяться, но может работать в вашей ситуации.

Answer 2

.outer {
    position: relative
}
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Or whatever */
    opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=60);
}

<div class="outer">
    <div class="background"></div>
    Content
</div>

Обратите внимание, что иногда правило height: 100% для .background не работает в IE 6, и в этом случае вам следует попробовать применить hasLayout к первому .outer, а также, если это не так, .background ( Вы можете добавить hasLayout с правилом CSS zoom: 1 без побочных эффектов). Если ни один из этих способов не работает, вам, вероятно, понадобится значение expression для IE 6. Если вам нужна дополнительная помощь, оставьте комментарий.

Как сказал smerriman , в браузерах, поддерживающих CSS3, гораздо проще (точнее, rgba или hsla значения цвета). Это было бы так просто, как background-color: rgba(0, 0, 0, 0.6).

Answer 3

Просто используйте прозрачное изображение в качестве фона для этого элемента. Когда вы используете непрозрачность в CSS для данного элемента, все в этом элементе, включая этот элемент, получает этот стиль. Смотрите здесь:

http://jsfiddle.net/zV4BR/

Answer 4

используйте этот метод

Как обеспечить прозрачность между браузерами только для фона элемента?

использовать Rgba вместо непрозрачности.см. пример здесь: http://jsfiddle.net/ypaTH/

Вы также должны установить фон для внутренних элементов.

Редактировать: , чтобы код rgab для IE использовал это http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

Answer 5

вы должны использовать оба

непрозрачность в CSS и

фильтр: альфа (непрозрачность = 60);

для т.е. и прочее

Answer 6

должно быть

непрозрачность: 0,6

, кроме того, непрозрачность работает по-разному в зависимости от того, какой веб-браузер вы используете