如何在图像中水平和垂直对齐文本以保持其响应速度？

Question

我想在图像上放置文本，所以我使用了位置（相对和绝对）方法。此方法有效，但无响应。我必须编写所有维度的媒体查询。有没有比这更好的方法呢？在这种情况下，我不必使用媒体查询，并且它可以在所有情况下自行调整（例如，如果内容是更多...或动态）]

** Bootstrap **

<div class="ticket">
                    <img src="img/144ppi/Asset 2.png" alt="" class="tickectImg img-fluid">
                    <h1 class="heading">Rolex</h1>
                    <p class="poolTitle">Pool # :
                        <span class="poolNo">UC 001</span>
                    </p>
                    <h1 class="drawDateNo">2020 05 07</h1>
                    <p class="drawDateTitle">Draw Date</p>
                    <p class="tickectTitle align-middle">Ticket</p>
                    <h3 class="ticketNo">123345</h3>
                </div>

CSS

.ticket {
    position: relative;
}


.heading {
    position: absolute;
    top: 4px;
    left: 40px;
    font-size: 2rem;
    background: linear-gradient(90deg, #272769, #3950a2, #272769);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.poolTitle {
    position: absolute;
    top: 34px;
    left: 40px;
}

.drawDateNo {
    position: absolute;
    bottom: 18px;
    left: 40px;
    font-size: 2rem;
    background: linear-gradient(90deg, #272769, #3950a2, #272769);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.drawDateTitle {
    position: absolute;
    bottom: -6px;
    left: 40px;
}

.tickectTitle {
    position: absolute;
    right: 52px;
    top: 46px;
    writing-mode: vertical-rl;
    font-size: 20px;
}

.ticketNo {
    position: absolute;
    right: 18px;
    top: 20px;
    writing-mode: vertical-rl;
    font-size: 34px;
}

Answer 1

您可以在背景中添加img，并在html通量中添加文本。

background: url('img/144ppi/Asset 2.png') 

或者您可以将所有文本分组到一个容器中，并给该容器绝对位置

<div class="ticket">
  <img src="img/144ppi/Asset 2.png" alt="" class="tickectImg img-fluid">
  <div class="ticket-content">
    <h1 class="heading">Rolex</h1>
    <p class="poolTitle">Pool # :
      <span class="poolNo">UC 001</span>
    </p>
    <h1 class="drawDateNo">2020 05 07</h1>
    <p class="drawDateTitle">Draw Date</p>
    <p class="tickectTitle align-middle">Ticket</p>
    <h3 class="ticketNo">123345</h3>
  </div>
</div>