Question

我试图创建一个响应式网站，但我不能将我的文字完美地放在我的图像上而不会移动到某个地方。我只是为了您的信息而成为初学者。

＆＃13;

    .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%;}

＆＃13;

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

＆＃13;

Answer 1

您是否尝试将图像转换为div背景？使用此属性：background-image：url（＆＃34; service.png＆＃34;）;

Answer 2

HTML：

<div id=image><a href="service.html"><p id="text" class="line-1 anim-    typewriter">Unser Serviceangebot</p></a></div>

的CSS：

#image{
  background: url(service.png) no-repeat;
  padding: ;/* Resize it for your picture! *

}
#image a{
padding: 4px; 
}

Answer 3

我不知道这是否可以帮到你，但我把所有东西都放在同一个div下面，然后把它们浮起来：

#img
    {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;

    }
#txt
    {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;

    }

Answer 4

我之前也遇到过这个问题。我用卡修好了。如果正确定位div，则不必使用z-index。正如AdrienVeillault所说，你可以使用background-image属性，但如果你不想这样做，这对我有用：

#background {
  position: relative;
  top: 0;
  left: 0;
  max-width: 60%;
  height: auto;
}

#text {
  position: absolute;
  top: 30vh;
  left: 20vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-family: 'Bitter', serif;
  color: rgba(255,255,255,.75);
  text-shadow: 3px 3px #000000;
}

<div class="container">
    <div id="card">
      <img id="background" src="https://greycellsenergy.com/wp-content/uploads/2016/06/light-grey-1170x780.jpg" />
      <a href="service.html">
        <p id="text" class="line-1 anim-typewriter">
          Unser Serviceangebot
        </p>
      </a>
    </div>    
</div>

这是小提琴： https://jsfiddle.net/hgrwfso3/

另外，如果可以的话，我建议你研究一下像Bootstrap这样的CSS框架 - 他们有一个css类的.img-responsive，可以处理没有所有工作的响应式图像。

希望这有帮助！

Answer 5

你尝试过使用Bootstrap卡吗？这应该可以解决问题。

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

如何使用特定位置响应图像上的文字？

5 个答案: