Как наложить текст на картинку (HTML + CSS)

Тема в разделе "Верстка", создана пользователем Acden, 15 окт 2011.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Acden

    Acden

    Регистр.:
    12 янв 2008
    Сообщения:
    200
    Симпатии:
    12
    Хочу сделать список товаров, будут оформленные плашки в Photoshop.

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


    Как это сделать в HTML + CSS?
    Пробовал через Position:absolute, но текст уходит под картинку, с z-index изменений не вижу.

    Надо было внешнему слою все-таки назнавать relative, вот
     
  2. ko1obok

    ko1obok Писатель

    Регистр.:
    20 сен 2011
    Сообщения:
    9
    Симпатии:
    0
    в нужном месте ставишь блок, которому в css прописываешь бэкграундом свою картинку, в сам блок пишешь нужный текст, все будет работать
    решения, содержащие position:absolute практически всегда ущербны, старайтесь употреблять его как можно меньше
     
  3. Acden

    Acden

    Регистр.:
    12 янв 2008
    Сообщения:
    200
    Симпатии:
    12
    Мне нужно именно с помощью img. Через background любой может сделать, это элементарно.

    Решил проблему так:
    у внешнего блока (img) ставится position:relative, у внутреннего :absolute.
     
  4. wmaximum

    wmaximum Постоялец

    Регистр.:
    23 апр 2008
    Сообщения:
    64
    Симпатии:
    5
    чяерез margin c минусовым значением не получается?
    типа так:
    HTML:
    <img src="1140095.jpg" width="200" height="200"/>
    <div style="width:200px; height:200px; margin-top:-100px; text-align:center; color:white">Насос</div>
    У меня получилось )
     
  5. Delfi

    Delfi Создатель

    Регистр.:
    16 июн 2011
    Сообщения:
    44
    Симпатии:
    11
    HTML:
    <div style="position:relative">
     
    <img src="img.jpg" style=z-index: 1">
    <div style="z-index:2;position:absolute;top: 5px">Текст</div>
     
    </div>
    Не забываем, что если внешний блок без position:relative, то блок с position:absolute не будет отталкиваться от этого родителя.

    Ну или как описали выше - с margin. Дело вкуса
     
  6. tshestel

    tshestel Постоялец

    Регистр.:
    19 янв 2011
    Сообщения:
    70
    Симпатии:
    3
    z-index нужно менять в родительском div, тогда он будет по верх картинке. А у вас он вынесен за пределы скорее всего.