Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > div с фоном поверх изображения

Автор: ashenemy 31.3.2009, 15:07

Есть код

Код


    <style>

        div.anons{
            width:250px;
            height:250px;
            padding:5px;
            float:left;
        }
        div.anonstitle{
            background:url(bg.png);
            color:#fff;
            text-align:center;
            z-index:900;
            margin-top: -50px;
            
        }


    </style>

    <div class="anons">
        <div class="fon">
            <img src="1.jpg" width=250 class="img" />
        </div>
        <div class="anonstitle">Название</div>
    </div>

нужно чтобы anonstitle выходил поверх изобюражения
сейчас выводится только текст фона не видно, самое интересное, что осел корректно реагирует, вот фокся нет, исправить можно как то?

Автор: NDenis 31.3.2009, 17:07

а если дополнить так:

Код


div.anons{
            background:url(1.jpg) repeat 0 0;
            width:250px;
            height:250px;
            padding:5px;
            float:left;
        }

Автор: ashenemy 31.3.2009, 17:28

Цитата(NDenis @ 31.3.2009, 17:07)

а если дополнить так:

Код


div.anons{
            background:url(1.jpg) repeat 0 0;
            width:250px;
            height:250px;
            padding:5px;
            float:left;
        }

К сожалению, не помогает, может какой нить скрипт решить может проблему?

Автор: WebMast 31.3.2009, 21:22

Можешь попробывать так:

Код


<div id="anons">
<div class="anonstitle">
      text поверх фона
</div>
<img src="fon.jpg" />
</div>

Код


#anons{
    position:relative;
}
#anons img{
    position:absolute;
    top:0;
    left:0;
    z-index:50;
    width:100%;
    height:100%;
}
#anons .anonstitle{
    position:absolute;
    top:0;
    left:0;
    z-index:300;
}

CSS настроишь сам, под себя.

http://wmast.org/index.php?showtopic=4