图像html css上的文本[重复]
Posted
技术标签:
【中文标题】图像html css上的文本[重复]【英文标题】：Text over Image html css [duplicate] 【发布时间】：2014-02-11 09:47:58 【问题描述】：我正在尝试在 html 中设置图像并希望文本在其上运行。但是当我使用以下代码时，文本将在图像下运行。
HTML
<div id="titel">
<img src="images/titel.jpg" >
<h3>Titel</h3>
</div>
CSS
#titel
float:left;
width:220px;
height:100px;
margin:0px 5px 5px;
h2
position:absolute;
【问题讨论】：
【参考方案1】：您需要将position:relative 添加到标题 div 并添加到图像的顶部值。
#titel
float:left;
width:220px;
height:100px;
margin:0px 5px 5px;
position:relative;
h3
position:absolute;
top:0;
jsFiddle example
另一种选择是将图片设置为div的背景图片，完全省去定位。
jsFiddle example
（另请注意，在您的示例中，您有一个 h3 元素，但在您的 CSS 中，您的目标是一个 h2 元素。）
【讨论】：
也可以设置z-index:1 保持文字覆盖图片。
@Danko - 您仍然需要设置顶部位置并在父 div 上设置相对位置。
是的，我的意思是另外可以设置z-index值【参考方案2】：
使用 z-index：
img
position:absolute;
z-index:-1;
z-index 定义元素的堆栈顺序。
【讨论】：
【参考方案3】：使用图片作为背景并添加文字。
<html>
<head>
<style>
body
background-image:url('images/titel.jpg');
</style>
</head>
<body>
<h3>Titel</h3>
</body>
</html>
【讨论】：
以上是关于图像html css上的文本[重复]的主要内容，如果未能解决你的问题，请参考以下文章