如何将文字置于不同位置的不同图像上？

我知道如何通过给图像position:relative;和文本position:absolute;将文字放在1张图像上，然后将文本放在我想要的位置。我的问题是，我有我想放置文本的图像列表。我提到的解决方案不起作用，因为当我尝试定位文本时，它们都具有相同的位置，而我只看到一个文本。我相信你明白我的意思。只有通过使用CSS才有解决方案？如何将文字置于不同位置的不同图像上？

编辑：我应该提到，这是一个垂直列表和所有图像具有相同的left。 编辑2：他们的文字和图像已经在一个容器！

谢谢。

来源

2013-05-10 Loolooii

您应该将图像和文本嵌套在容器（div）中。然后，您将文本放置在div中，并将图像放在div中。这应该可以解决你的问题。

这是我的工作例如：

http://jsfiddle.net/kqYcT/

.image_container{ position: relative; }

.image_container img{ 
    position: relative; 
    width: 200px; 
    height: 100px; 
    z-index: 1; 
} 

.text{ 
    position:absolute; 
    top: 70px; 
    left: 35px; 
    color: white; 
    z-index: 2; 
    }

来源

2013-05-10 17:21:03

他们已经在一个容器中。我试图给图像一个Z-索引，并将其放置在绝对位置和正常位置，但是我无法使其工作。我在等你的例子，谢谢。 – Loolooii 2013-05-10 17:24:51

哈哈。几乎相同的答案在同一时间。 :) – 2013-05-10 17:33:28

我刚刚发布了一个jsfiddle，您可以在其中查看我的实现。 – 2013-05-10 17:33:56

CSS的 “position: relative” 修改目标元素的位置相对于父容器。解决方案是将这两个项目放在父容器中。您将文本和图像“绑定”在一个包装容器中。

这里有一个的jsfiddle给你看： http://jsfiddle.net/r2rCt/1/

如：

<div> 
<div class="text" style="position: relative; top: 20px; right: 20px;">Text</div> 
    <img src="<your img URL>"></img> 
</div>

来源

2013-05-10 17:28:47

如果你不介意，我会接受斯蒂芬的回答，因为他在做这个例子:)当然，你会赞成你的！ – Loolooii 2013-05-10 17:39:25

对我有好处。只是在这里帮助（并试图在这个网站上的其他伟大的开发人员的1000年之前得到答案是棘手的！:) – 2013-05-13 14:53:07

如何将文字置于不同位置的不同图像上？

回答

相关问题