【问题标题】:how to display text on the image which is on top of other background image in html 5?如何在 html 5 中其他背景图像之上的图像上显示文本?
【发布时间】:2016-01-11 19:13:34
【问题描述】:

我有一个背景图像,在该图像之上还有一个我想在其上显示文本的图像。我将背景图像和其他图像的位置都设置为绝对值。我已经从其他网站检查过,如果你想在图像顶部显示文本,您必须将图像位置设置为相对位置,将文本位置设置为绝对位置,但在我的情况下,如果我将图像位置设置为相对位置,尽管绝对值,我的整个背景都会受到干扰。这是我的网站图片i want to display my text on the circular picture

【问题讨论】:

  • 希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究,无论是通过谷歌还是通过搜索,尝试一下。如果您仍然遇到问题,请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
  • @Paulie_D 我已经尝试过这样做,但是文本出现在图像的底部而不是顶部。我已经告诉过我发现位置有问题,因为它在任何地方都完成了图像的位置是相对的,而在我的情况下它是绝对的,所以我只是在问替代方案。
  • 如果您已经尝试过……您应该将代码添加到问题中。

标签: html css image


【解决方案1】:

尝试使用<figure>标签设置<figcaption>位置,如下例所示。

<figure>
  <img src="img.jpg" alt="The Pulpit Rock">
  <figcaption style="position: relative; top: -36px;"> 
    Text on the image
  </figcaption>
</figure>

【讨论】:

    猜你喜欢
    • 2013-10-08
    • 2011-06-15
    • 1970-01-01
    • 1970-01-01
    • 2011-03-20
    • 1970-01-01
    • 1970-01-01
    • 2020-11-30
    • 2016-08-21
    相关资源
    最近更新 更多