LESS / CSS: написание статического текста на изображении - PullRequest
Новая
       17

LESS / CSS: написание статического текста на изображении

0 голосов
/ 27 марта 2019

У меня следующее изображение, как следующее,

enter image description here

Как я могу написать текст на изображении выше и добиться результата следующим образом?

Ответы [ 2 ]

1 голос
/ 27 марта 2019

Попробуйте, надеюсь, это вам поможет. Спасибо 

.wrapper {
  position: relative;
}

.wrapper img {
  width: 100%;
}

.wrapper label {
  color: #fff;
  font-size: 24px;
  position: absolute;
}

.wrapper #id1 {
  left: 20px;
  top: 20px;
}

.wrapper #id2 {
  right: 20px;
  top: 20px;
}

.wrapper #id3 {
  left: 20px;
  bottom: 20px;
}

.wrapper #id4 {
  right: 20px;
  bottom: 20px;
}

.wrapper #id5 {
  right: 20px;
  top: 50%;
  transform: rotate(90deg)
}

.wrapper #id6 {
  left: 20px;
  top: 50%;
  transform: rotate(-90deg)
}
<div class="wrapper">
  <label id="id1">Text Left!</label>
  <label id="id2">Text Right!</label>
  <label id="id3">Text Bottom Left!</label>
  <label id="id4">Text Bottom Right!</label>
  <label id="id5">Text Rotate Right!</label>
  <label id="id6">Text Rotate Left!</label>
  <img src="https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/12/2015/07/Depth-of-field-landscape.jpg" alt="" />
</div>
0 голосов
/ 27 марта 2019

При условии, что у вас есть HTML как: 

<div class="container">
  <img />
  <p>Foo</p>
</div>

что-то вроде этого будет работать (вам, очевидно, придется изменить значения): 

.container {
  position: relative; 

  img{ z-index: 1; // img styles here }
  p { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 3; transform: rotate(90deg) }

}

Шаг за шагом:

  • Позиционировать текст абсолютно
  • Поворот на 90 градусов
  • Установите Z-индекс выше, чем изображение
  • Правильно расположите текст на изображении
  • Прибыль ...
...