【问题标题】:HOW 2 place text on an <img>-tag?2 如何在 <img> 标记上放置文本?
【发布时间】:2011-09-21 23:47:08
【问题描述】:

我只是想知道如何将 html-text 放在 .我应该使用绝对位置吗?

让您知道我将在流体网格布局中使用 img。

谢谢你的想法?

【问题讨论】:

  • 我不明白你想做什么
  • @sirLisko 感谢我自己找到答案!在下面阅读我的最后一条评论:)

标签: css image css-position


【解决方案1】:

要在悬停的图像标签上放置文本,请使用此...

<img src="#" title="YOUR TEXT HERE" alt="" width="" height="" />

当有人将鼠标悬停在图像上时会显示标题。 alt 标签是由于某种原因无法显示图像时显示的内容。这些都是有用的属性,因为某些屏幕阅读器会使用标题标签。

如果您想在图像上显示实际文本,您可以执行类似...

<img src="#" title="YOUR TEXT HERE" alt="" width="100" height="100" /><span style="margin: 20px 0 0 -80px;">YOUR TEXT</span>

考虑到您的图像为 100x100 像素,这将显示距离图像顶部 20 像素和 20 像素的文本。

【讨论】:

  • 我自己找到了解决方案!但是感谢这个技巧!解决方案遵循我在开始时写的关于使用 2 个 div 的想法:一个具有 -tag,另一个具有文本

    。然后将最后一个设置为绝对位置,然后将其浮动在另一个之上!

猜你喜欢
  • 2020-01-24
  • 2014-05-03
  • 1970-01-01
  • 1970-01-01
  • 2015-09-17
  • 1970-01-01
  • 2011-08-15
  • 1970-01-01
  • 2020-12-20
相关资源
最近更新 更多