Question

我使用过这种方法https://stackoverflow.com/a/22211990

唯一的问题是，只要我在div中输入文本/内容，就像这样： <div>abc</div>

该文字显示在图片下方。

* {
  padding: 0px;
  margin: 0px;
}

.image {
  background: url('https://i.pinimg.com/originals/4f/d6/ef/4fd6ef1f078ca5e229ce5925c10f194a.jpg') no-repeat;
  background-size: 100%;
  background-size: contain;
  height: 0;
  padding-top: 100.44%; /* (bg image width/ bg image height) * 100*/
}

<div class="image">aaa</div>

Answer 1

您可以提供图片元素position:relative并将文字换成包含position:absolute和top:0

的元素

*{
  padding:0px;
  margin:0px;
}

.relative {
  position:relative;
}

.text {
  position: absolute;
  color: red;
  top:0;
}

.image{
  background:url('https://i.pinimg.com/originals/4f/d6/ef/4fd6ef1f078ca5e229ce5925c10f194a.jpg') no-repeat;
  background-size:100%;
  
  height:0;
  padding-top:100.44%;  /* (bg image width/ bg image height) * 100*/
  
}

<div class="image relative">
    <div class="text">aaa</div>
</div>

Answer 2

对我来说：你的选择是一个糟糕的策略，因为填充顶部会影响你的内容。这不是后台工作。

我的解决方案：结合高度100vh和背景大小的封面。

*{
  padding:0px;
  margin:0px;
}

.image{
  color: white;
  height: 100vh;
  background:url('https://i.pinimg.com/originals/4f/d6/ef/4fd6ef1f078ca5e229ce5925c10f194a.jpg') no-repeat;
  background-size:cover;
  }

<div class="image">aaa</div>

如何在背景图像上显示文字？

2 个答案: