Question

我正在开发一个项目，我试图在所有浏览器大小的图像上的一行上方生成文本。一旦你看到下面的codpen链接，这将更加清晰。

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

＆＃13;

#text{
  position: absolute;
  top: 685px;
}

html,body {
    margin:0;
    padding:0;
}


#background_pic
{
  width: 100%;
}

＆＃13;

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

＆＃13;

Answer 1

您将#text设置为从顶部开始的静态位置，这不适用于所有屏幕尺寸（可能会有所不同），这会导致图像发生变化。

您希望根据图像高度动态设置文本。以下是使用JavaScript的示例：

＆＃13;

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);

＆＃13;

#text{
  position: absolute;
  top: 685px;
}

html,body {
    margin:0;
    padding:0;
}


#background_pic
{
  width: 100%;
}

＆＃13;

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

＆＃13;

尝试上面的代码段，看看如何调整大小总是允许文字保持在线上方。

Answer 2

如果你真正想要的只是在每一端都有半径的黑线上面的文字，那么只用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>

在图像上方的一行上方制作文本

2 个答案: