Автор Тема: Как сделать текст поверх картинки?  (Прочитано 1630 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн ipkarpov

  • Новичок
  • *
  • Сообщений: 48
    • Просмотр профиля
  • Версия modx: Evo
Как сделать текст поверх картинки?
« : 02 Сентябрь 2013, 13:59:18 »
Не могу пнять.
Есть чанк с галереей


<li><a href="[(site_url)][~[+id+]~]">[+img-news+]</a>
          <div class="floater">
            <h2><a href="[~[+id+]~]" title="[+longtitle+]">[+longtitle+]</a></h2>
            <p>[+introtext+]</p>
          <>
        </li>
В качестве картинки тут [+img-news+]
Что тут сделать чтоб текст добавить над ней.

#featured_content img{
   display:block;
   float:right;
   width:380px;
   height:290px;
   margin:0 10px 0 0;
   padding:4px;
   border:1px solid #FFFFFF;
   }


.text{
    display:inline-block;   
    position:relative;
}
.text span{
    display:inline-block;
    position:absolute;
    top:30px;   
    left:0px;
     
    /* Оформление текста */
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
     
    /* Фон */
    background-color:rgba(0,0,0,.4);
    padding:10px 30px;
}