Наложение текста на миниатюрное изображение HTML/CSS

Я пытаюсь наложить некоторый текст на изображение класса миниатюр. Мой HTML выглядит так:Наложение текста на миниатюрное изображение HTML/CSS

  <div class="col-md-4"> 
       <div class="thumbnail"> 
        <img src="GreatDanesEdit.jpg" width="700" height="700"> 
        <h1>Game Day</h1> 
       </div> 
      </div>

Что на Земле я использую для моего CSS, чтобы получить мой «h1», чтобы накладывать изображение? Я могу только представить, чтобы это было написано под ним. В идеале я хотел бы, чтобы мой текст тоже был направлен на изображение.

В настоящее время мой CSS выглядит так, как мне центрировать текст над изображением?

.thumbnail{ 
    position:relative; 
} 

.thumbnail h1{ 
    position:absolute; 
    top:50%; 
    left:0; 
    transform:translateY(-50%); 
    margin:0; 
    color:#551A8B; 
    text-shadow: 0 0 5px #fff; 
    font-size: 48px; 
    font-family: 'Shift', sans-serif; 
    font-weight: bold; 
    text-align:centre; 
}

Спасибо!

источник

2015-06-21 jmn8

Использование relative позиционирования для .thumbnail элемента и absolute позиционирования для h1 элемента:

.thumbnail{ 
 
    width:300px; 
 
    position:relative; 
 
} 
 

 
.thumbnail img{ 
 
    max-width:100%; 
 
} 
 

 
.thumbnail h1{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:0; 
 
    color:lightgrey; 
 
    width:100%; 
 
    text-align:center; 
 
    transform:translateY(-50%); /* doesn't work in IE9 and older I'm affraid */ 
 
    margin:0; 
 
}

<div class="col-md-4"> 
 
    <div class="thumbnail"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg"> 
 
    <h1>Game Day</h1> 
 
    </div> 
 
</div>

источник

2015-06-21 22:57:17

Это абсолютно сработало для меня, спасибо за то, что вы решили мою головную боль и позволили мне спать сегодня вечером! Но как получить этот текст как по вертикали, так и по горизонтали в изображении? (Я новичок в этом) – jmn8

Но он решил только часть своей проблемы. Для полного решения проверьте https://jsfiddle.net/pbubqt5y/1/ – connexo

Согласен, это был только полу-ответ, но, тем не менее, замечательный! @connexo Ваша ссылка jsfiddle не может корректно отображаться в моем CSS. Обратите внимание, что я использую миниатюру для нескольких изображений. – jmn8

-2

Попробуйте использовать отрицательный крайний верхний стиль в теге h1. Также выровняйте его по центру, если хотите, чтобы его центрировали с помощью align="center".

Обновленный код:

 <div class="col-md-4"> 
      <div class="thumbnail"> 
       <img src="GreatDanesEdit.jpg" width="700" height="700"> 
      <h1 align="center" style="margin-top:-350px;">Game Day</h1> 
      </div> 
     </div>

пример скрипка: https://jsfiddle.net/pbubqt5y/

источник

2015-06-21 22:47:10 Josh979

Наложение текста на миниатюрное изображение HTML/CSS

ответ

Смежные вопросы