如何使图像响应特定位置的文本？ [英] How to make text on Image responsive with a specific position?

问题描述

我想创建一个自适应网站，但我不能将我的文字放在我的图片上，而不会移动到某个地方。
我是一个初学者只是为了您的信息。

I'm trying to make a responsive website but I cant place my text on my image perfectly without it moving somewhere. I'm a beginner just for your information.

    .line-1{
    position: relative;
    top: 50%;
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 2vw;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    font-family: 'Bitter', serif;
    color: rgba(255,255,255,.75);
    text-shadow: 3px 3px 	#000000;}

    #text {
    z-index: 200;
    position: absolute;
    left: 27%;
    top: 25%;}

  <div>
        <img id="image" src="service.png" alt="Service Angebot"
        height="60%" width="60%" />
        <a href="service.html"><p id="text" class="line-1 anim-typewriter">
          Unser Serviceangebot</p></a>
    </div>

推荐答案

您尝试使用引导卡。这将解决问题。

have you tried using Bootstrap cards. That should fix the issue.

<div class="card card-inverse">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

这篇关于如何使图像响应特定位置的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！