如何使用内联块将文本放在背景图片下方 属性

how to place text below background image using inline block property

你好,我正在尝试将文本放在背景图片下方。就像这里我想并排放置两个背景图像,在每个图像下方我想放置文本。我拿了一个 div class 它有样式内联块 属性。所以我如何借助或使用内联块 property.i 来做到这一点已经尽可能多地解释了我的问题。如果可能的话,请通过我的 fiddle link。我已经尝试过这个属性但是文本在图像上重叠我希望图像下方也检查类似的问题没有人对背景图像做过所以请检查我的代码我已经尝试过它在评论框中给出。请帮助我谢谢。 :)

我希望这就是您要找的东西。

这是 link 到更新后的 fiddle: Fiddle

如果将背景颜色更改为图像,它应该仍然有效

我简单补充了:

.imgcontainer p {
  position: relative;
  bottom: -90px;
  max-width: 100px;
}

到段落

您还没有为您的 imgcontainer 中的段落标记设置 css 属性。

在我的 fiddle 中,我添加了以下内容:

.imgcontainer p {
  position: relative;
  top: 100px;
}

我还为两个背景图像添加了 background-size。我使用了 background-size: cover;(我用我网站上图片文件夹中的图片网址替换了图片网址)

https://jsfiddle.net/RachGal/f0fsLd2h/ :Fiddle