Как сделать текст на картинке css?

Пользователь

от cristina.schaefer , в категории: HTML/CSS , 3 года назад

Как сделать текст на картинке css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от kendall_mckenzie , 3 года назад

Сделать текст на картинке css, можно так:


HTML:

1
2
3
4
5
6
<body>
    <div class="lol">
        <img src="image/12.png">
        <span>Привет!</span>
    </div>
</body>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
.lol {
    position: relative;
    display: inline-block;
}


.lol img {
    height: 100px;
    width: 100px;
}
.lol span {
color: rgb(255, 255, 255);
background: rgb(15, 15, 15);
position: absolute;
right: 0px;
bottom: 30px;
}


Пользователь

от stephania , год назад

@cristina.schaefer 

Чтобы сделать текст на картинке с помощью CSS, вам нужно создать элемент HTML (например, div), который будет содержать картинку и текст. Затем вы можете использовать CSS, чтобы настроить позицию, цвет, размер и другие свойства текста. Например:


HTML:

1
2
3
4
<div class="image-text">
  <img src="image.jpg" alt="image">
  <p>This is some text on top of the image</p>
</div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.image-text {
  position: relative;
}
.image-text p {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  font-size: 24px;
}


В данном примере создается класс image-text, который содержит картинку и текст, и в нем мы задаем абсолютное позиционирование для текста, а так же задаем размер, цвет и другие свойства текста.