使图像上方的线条成为文字 [英] making text above a line on image

问题描述

我正在研究一个项目，我试图在所有浏览器大小的图片上方制作一行文字。一旦你看到下面的codpen链接，这将更加清晰。

我现在面临的问题是，一旦我将最高值设置到正确的位置并更改浏览器宽度，文本就不会再变成行。

#text {position：absolute;顶部：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= 20050929041542id =background_pic>< / image>< div id =text> hello world< / div>

解决方案

需要设置在相对于视顶部值。

#text {position：absolute;顶部：47vw;} html，body {margin：0;填充：0;}＃background_pic {宽度：100％;}

<类= 片段码-HTML语言HTML的prettyprint-越权 预> < image src =https://vignette.wikia.nocookie.net/uncyclopedia/images/4/47/Horiz-line.JPG/revision/latest/scale-to-width-down/600?cb= 20050929041542id =background_pic>< / image>< div id =text> hello world< / div>

I am working on a project where I am trying to make a text above a line on the image on all browser sizes. This will be more clear once you see the codpen link below.

The problem I am facing now is that once I set the top value to the right position and change the browser width, the text doesn't become above the line anymore.

#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>

解决方案

you need to set the top value in relative to the viewport.

#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>

这篇关于使图像上方的线条成为文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！