Создание текста над строкой на изображении

halmos спросил: 28 марта 2018 в 04:17 в: javascript

Я работаю над проектом, где я пытаюсь сделать текст над линией на изображении во всех размерах браузера. Это будет более понятным после того, как вы увидите ссылку на пробную версию ниже.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что как только я установил верхнее значение в нужную позицию и изменил ширину браузера, текст не станет над линией больше.

#text{
  position: absolute;
  top: 685px;
}

html,body {
    margin:0;
    padding:0;
}


#background_pic
{
  width: 100%;
}

<image src="https://vignette.wikia.nocookie.net/uncyclopedia/images/4/47/Horiz-line.JPG/revision/latest/scale-to-width-down/600?cb=20050929041542" id="background_pic"></image>

<div id="text">
hello world
</div>

3 ответа

Есть решение
dawit ответил: 29 марта 2018 в 04:03

вам нужно установить верхнее значение относительно области просмотра.

#text{
  position: absolute;
  top: 47vw;
}

html,body {
    margin:0;
    padding:0;
}


#background_pic
{
  width: 100%;
}
<image src="https://vignette.wikia.nocookie.net/uncyclopedia/images/4/47/Horiz-line.JPG/revision/latest/scale-to-width-down/600?cb=20050929041542" id="background_pic"></image>

<div id="text">
hello world
</div>
Jonathan Lam ответил: 28 марта 2018 в 04:29

Вы устанавливаете #text в статическое положение сверху, которое не будет работать на всех размерах экрана (которые могут отличаться), что приведет к изменению изображения.

Вы хотите динамически установить текст в зависимости от высоты изображения. Вот пример использования JavaScript:

function setTextPosition() {
  // get html elements
  var image = document.querySelector('#background_pic');
  var text = document.querySelector('#text');
  
  // get height of image
  var imageHeight = image.clientHeight;

  // dynamically set text position (the '-20' is meant to make the text stay above the line)
  text.style.top = imageHeight/2 - 20 + 'px';
}


// set the text position on load and resize
window.addEventListener('load', setTextPosition);
window.addEventListener('resize', setTextPosition);
#text{
  position: absolute;
  top: 685px;
}

html,body {
    margin:0;
    padding:0;
}


#background_pic
{
  width: 100%;
}
<image src="https://vignette.wikia.nocookie.net/uncyclopedia/images/4/47/Horiz-line.JPG/revision/latest/scale-to-width-down/600?cb=20050929041542" id="background_pic"></image>

<div id="text">
hello world
</div>

Попробуйте приведенный выше фрагмент кода, и вы увидите, как его изменение всегда позволяет тексту оставаться над строкой.

Jonathan Lam ответил: 28 марта 2018 в 04:28
@ ScottMarcus Вау, это было быстро. Собирался создать фрагмент из него.
Scott Marcus ответил: 28 марта 2018 в 04:28
Пожалуйста, просто опубликуйте свое рабочее решение прямо здесь, в своем ответе внутри "фрагмента кода". Это облегчает нам всем понимание вашего ответа и гарантирует, что он всегда будет доступен в будущем.
halmos ответил: 28 марта 2018 в 04:35
я получаю стиль не определить
Jonathan Lam ответил: 28 марта 2018 в 04:36
@halmos Какое точное, полное сообщение об ошибке?
halmos ответил: 28 марта 2018 в 04:39
Uncaught TypeError: Невозможно прочитать свойство 'style' для null в setTextPosition
Scott Marcus ответил: 28 марта 2018 в 04:36

Если все, что вам действительно нужно, это текст над черной линией, у которой на каждом конце есть радиус, тогда вы можете сделать это намного проще, просто используя CSS.

Обернув текст и строку в другой элемент, затем вы можете создать пространство над и под ними:

#wrapper {
  margin:100px 0;
}

.underline {
  border:3px solid black;
  border-radius:10px;
}
<div id="wrapper">
  <div>Hello World!</div>
  <div class="underline"></div>
</div>
halmos ответил: 28 марта 2018 в 04:35
Нет, это не тот случай
Scott Marcus ответил: 28 марта 2018 в 04:35
@halmos Тогда, что случилось? Похоже, это то, что вы делаете.
halmos ответил: 28 марта 2018 в 04:38
проблема намного сложнее представленной, пока @Johnatan находится на правильном пути. см. его ответ