使图形相对于 H1 文本保持在同一位置

Question

我正在尝试让一个黄色的小旋风在某些文本中的某个词下划线，并在页面调整大小时保持原位。现在我可以在文本下方的正确位置看到旋风，但当屏幕调整大小时，一切都变得糟糕起来。

这是我想要的图片

<div>
  <span>
<h1>How are you doing? Hello World.</h1>
<img src="imageurl here">
  </span>
</div>

div {
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: 40%;
    position: absolute;
}

h1{
  text-align: center;

}

span {
   margin-left: 140px;
   top: 40px;
   position: absolute;
  z-index: -1;
}

（我不想分享图片 URL，因为它是专有的）

关于如何响应式地实现这种效果有什么想法吗？

Answer 1

将您的图片放在 h1 标签内，并为您的 h1 标签指定一个位置属性。还要确保将 h1 设置为内联块元素并以某种方式将其居中。

<h1>How are you doing? Hello World.<img src="imageurl here"></h1>

h1{
  text-align: center;
   position: relative;
   display: inline-block;
   margin: 0 auto;
}

img{
   left: 0;
   top: 0;
   position: absolute;
  z-index: -1;
}

有许多不同的方法可以实现您的目标。

使图形相对于 H1 文本保持在同一位置

Get an Graphic to Stay in Same Place Relative to H1 Text

html

css

image

responsive