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

Question

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

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

Answer 1

должно быть

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

рядом с этой непрозрачности работает по-разному в зависимости от которых веб-браузер вы используете

Answer 2

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

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

фильтр: alpha (opacity = 60);

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

Answer 3

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

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

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

Answer 4

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

http://jsfiddle.net/zV4BR/

Answer 5

.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 said, это намного проще в браузерах, которые поддерживают CSS3 (точнее, rgba или hsla значений цвета). Это будет так же просто, как background-color: rgba(0, 0, 0, 0.6).

Answer 6

использование этого метода

How to give cross browser transparency to element's background only?

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

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

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