Как получить элемент img для рендеринга под фоновое изображение в CSS - PullRequest
Новая
       13

Как получить элемент img для рендеринга под фоновое изображение в CSS

0 голосов
/ 26 мая 2010

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

Вот мой текущий CSS для полупрозрачного div: 

#slideshow .info
{
    height: 80px;
    margin-top: -80px;
    background: url(../../images/slideshow-info-pixel.png) repeat;
}

... с slideshow-info-pixel.png в виде одного пикселя, непрозрачность 50%, PNG 24.

Я уже пробовал z-index, и CSS должен быть совместим с IE6.

Ответы [ 2 ]

2 голосов
/ 26 мая 2010

Если я прав, то, что вы делаете, это вставляете изображение в html, тогда у вас есть прозрачный div, отображаемый с помощью css.

Мое предложение здесь будет:

  • Фоновое изображение также отрисовывается с помощью css
  • использовать свойство position (это действительно необходимо)
  • Использовать z-index для рендеринга одного div над другим

CSS: 

.yourImage
{
    position: relative;
    background: url(./yourImage.png);
    width: 800px;
    height: 600px;
    z-index: 20;
}

. transparent
{
    position: relative;
    background: url(./transparent.png) repeat;
    width: 800px;
    height: 600px;
    z-index: 30;
}

.yourText
{
    position: relative;
    z-index: 40;
}

Если вы действительно хотите убедиться, что ваш CSS совместим с IE6, вам следует создать для него другой шаблон. Серьезно, удостовериться, что вы соблюдаете все особенности IE6 - это огромная трата времени. Более быстрый способ - сделать более простую версию вашей страницы, которую увидит только пользователь IE6.

0 голосов
/ 26 мая 2010

Вы должны поместить изображение в другой элемент, который находится позади элемента с фоновым изображением. Фоновое изображение всегда воспроизводит тыл больше всего.

...