Напишите что-нибудь поверх изображения HTML

0

Как я пишу текст в фотографию?

<a href="/"><img src"photo.png" />TEXT</a>

Я имею отношение к позиции css абсолютной и относительной? Я знаю, что это работает с абсолютной и относительной позицией, но это другой способ сделать и как наилучшим образом? Если это единственный способ с абсолютной и относительной позицией, то относительная позиция должна быть главной фотографией и позицией абсолютного содержания (ТЕКСТ)?

  • 0
    Подобный вопрос задавали слишком много раз.
Теги:

3 ответа

1
Лучший ответ

вы можете это сделать

<img src="http://upload.wikimedia.org/wikipedia/commons/5/5a/SMirC-hi.svg" /><div style="position:relative; left:120px;top:-150px">TEXT</div>

для демонстрации

http://jsfiddle.net/5CSej/

0

хорошо, вот еще один способ добавить текст поверх изображения. В этом случае вам нужно использовать фоновое изображение. Вот Демо.

div:before{
  content: "";
  position:absolute; 
  background:url('http://lorempixel.com/400/400') no-repeat;
  width:400px; height:400px;
  z-index:-1;
}

<div><h1>Look at ME!</h1></div>
  • 0
    @ Джон Смит, тебе нравится этот метод, чтобы поместить текст поверх изображения?
0

попробуйте что-то подобное, но это с абсолютным и относительным

<tr>
<div class="image">
  <img alt="" src="http://www.YourDomain.com/img/yourImage.jpg" />
  <div class="text">
    <p>This is some demonstration text</p>
    <p>This is some more wonderful text</p>
  </div>
</div>
</tr>

ur css

.image {
    position:relative;
}
.image .text {
    position:absolute;
    top:10px;
    left:10px;
    width:300px;
}

Это поместит текст непосредственно на изображение

  • 0
    Что, если ОП хочет, чтобы изображение и текст были кликабельными?
  • 0
    нет проблем, передайте <a href=""> изображение, это можно заметить, то же самое будет сделано с текстом ... попробуйте один раз.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню