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

The following CSS, applied to an <a> and a <div> residing in individual <tr>▶<td> elements in a <table> (with border-collapse and td { padding: 0px; } set), works as expected:

a {
    background-image: url("http://ibin.co/19rwR69EOigr");
    height: 100px;
    width: 120px;
    display: block;
}
div {
    width: 200px;
    box-shadow: #000 0px 0px 13px;
}

Если я применил непрозрачность к <a>, внутреннее расслоение браузера, похоже, ужасно нарушается.

Comparison Обратите внимание, что последний пиксель тестового изображения находится в пределах <div> box-shadow, даже в первом примере. (И он говорит opacity = ".99", если вы не видите его на изображении > . > )

Возможно, это ошибка рендеринга, которая способствовала ползучести в Firefox и Chrome?: P

Посмотрите, что открывается и закрывается в этом JSFiddle.

Спасибо заранее!

Ответы

Ответ 1

Довольно просто.

Благодарим вас за чистое форматирование.

Измените opaque ID на следующее:

#opaque {
    opacity: .99;
    z-index:-10;
    position:relative;
}

http://jsfiddle.net/SinisterSystems/GbAYU/3/

Что происходит, когда установлен opacity, фоновый метод CSS3, чтобы интерпретировать его, вызывает довольно симпатичный wild z-index.

Просто установите его в стек позади других элементов, и все будет отлично работать для вас.

position:relative; - В противном случае он не примет ваше свойство z-index.

z-index:-10; - чтобы он помещал его за z-index из 0 других объектов.

EDIT:

Значение по умолчанию для HTML-элементов не поддерживает static как объект, к которому применяется z-index, следовательно, объявление position.

И это полностью выполняется с absolute, fixed, relative или inherit, , но не static.