Question

有没有人知道在图像顶部显示文字的简单方法？我发现的一个解决方案是执行以下操作：

<img id='img1' src='myimage.jpg'>
<div style='position:relative; top:-30px'> MY TEXT TO DISPLAY ON IMAGE</div>

这将导致Div及其所有内容向上移动30个像素。问题是我不知道我的图像的高度。但是，我知道宽度。此外，我的页面上可能有许多动态图像需要覆盖文本，我不一定知道服务器上运行时图像的绝对位置。

我还没有取得太大的成功，使图像成为背景图像，因为我无法让它显示完整的图像 - 它只是显示足够的图像放在div后面。如果您有任何建议或需要更多信息，请告诉我。

PS：我对javascript / JQuery这样的客户端解决方案持开放态度。

Answer 1

这个怎么样？

<div style="position: relative;">
  <img src="..." />
  <div style="position: absolute; top:0; left:0">!!! TEXT HERE !!!</div>
</div>

Answer 2

背景图片最适合这种情况。像

这样的东西

<style>
.thing {
  background-image: url(myimage.jpg);
  background-repeat: no-repeat;
  padding: 10px;;
</style>


<div class="thing">My Text</div>

Answer 3

我认为这篇较老的帖子可以帮助其他人寻找答案（假设你现在已经找到了:) Text on an Image button in c# asp.net 3.5

Answer 4

使用jQuery，您可以使用dimensions plug-in来获取图像的大小。然后，您可以轻松修改div的样式。

Answer 5

背景图片不是最好的 - 特别是在我们不完全了解页面的其他部分的情况下 - 因此很难说它们应该如何使用。

使用背景图像，您无法检查图像的大小！别忘了。

Answer 6

如果您希望它与背景图像一起使用，请尝试以下方法：

    .btn {position: relative; background-image: url('yourimagehere.png'); width: 100px; height: 20px;}
    .btn span {position: absolute; top:0; left:0; width: 100px; height: 20px; }

    <div class="btn">
         <a  href="#">My Text<span/></a>
    </div>

注意，您需要根据css中的按钮设置适合的宽度和高度。

Answer 7

我意识到在我感兴趣的特定情况下，所有图像实际上都具有相同的高度，因此我能够解决这个问题。既然如此，以下标记对我来说就没问题了：

<head>
<style type="text/css">
  .myClass {
    text-align:center;
    margin-top:-35px; /*set this to the distance from the bottom*/
    font-weight:bold;
    font-size:18px;
    color:#fff;
    background-color:#111;
    width:160px;
   }
</style>
</head>
<body>
<img src='My Fixed Size Image' />
<div class='myClass' runat='server'>MY TEXT HERE</div>
</body>

Answer 8

为什么不单独使用div？

<div style="display:inline;background:url('img.png');width:128px;height:128px;">text here</div>

在ImageButton上叠加文本

8 个答案: