获取相对于 H1 文本保持在同一位置的图形

Posted 2023-03-06

【中文标题】获取相对于 H1 文本保持在同一位置的图形

【英文标题】：Get an Graphic to Stay in Same Place Relative to H1 Text

【发布时间】：2020-04-10 10:47:58

【问题描述】：

我正在尝试使用黄色的小旋风来为某些文本中的单词添加下划线，并在页面调整大小时保持原位。现在我可以在文本下方的正确位置获得旋风，但是当屏幕调整大小时，一切都变得糟糕透顶。

这是我要做什么的图片

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

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

关于如何以响应方式实现这种效果的任何想法？

【参考方案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;

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