我正在尝试获得一个漂亮的页内菜单，其中包含一些小图像和这些图像 block 上的标题。 这些 block 工作正常，但文本叠加不行。
我的 HTML:
<!DOCTYPE html>
<head>
<title>Blocks example</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=980" />
</head>
<body>
<div id="wrapper">
<header>
<img src="img/header.jpg" alt="Header Blocks">
<span><a href="#" title="To homepage"><h1>Blocks example</h1></a></span>
</header>
<main>
<article id='blokken'>
<a href='#'><img src="img/placeholder.jpg" alt="placeholder 1"><p>placeholder 1</p></a>
<a href='#'><img src="img/placeholder.jpg" alt="placeholder 2"><p>placeholder 2</p></a>
<a href='#'><img src="img/placeholder.jpg" alt="placeholder 3"><p>placeholder 3</p></a>
<a href='#'><img src="img/placeholder.jpg" alt="placeholder 4"><p>placeholder 4</p></a>
<a href='#'><img src="img/placeholder.jpg" alt="placeholder 5"><p>placeholder 5</p></a>
<a href='#'><img src="img/placeholder.jpg" alt="placeholder 6"><p>placeholder 6</p></a>
</article>
</main>
</div>
<footer>
</footer>
</body>
还有我的 CSS:
body {
margin: 0;
}
#wrapper{
width: 980px;
margin: 0 auto;
padding-bottom: 50px;
}
/* Header */
header > img{
}
header > span{
position: relative;
display: inline;
top: 200px;
left: 150;
width: 200px;
height: 100px;
}
header > a{
/*opacity: 0;
filter: alpha(opacity=0); */
}
/* Blokken */
#blokken{
padding-left: 100px;
}
#blokken img{
margin: 25px 25px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#blokken img:hover{
-webkit-filter: brightness(50%);
filter: brightness(50%);
}
And here a link to a version online
这就是我想要得到的，但是文本位于叠加层中(文本“占位符”现在所在的位置): Screenshot
我尝试了很多绝对位置和相对位置，但似乎无法让它正常工作。 谁能为我提供解决方案，或者可以为我指明正确的方向？
最佳答案
看看这个 fiddle看看是否是您想要的。文本与图片的文本重叠，但您可以以任何方式更改图片。
我简化了你的 HTML。您必须将缺少的其余部分放在后面。
但主要的变化是表格布局以及从 HTML 中删除图像并将其添加到 CSS 上。这是 fiddle 的示例
<table id='blokken'>
<tr>
<td>
<a href='#'><p>placeholder 1</p></a>
</td>
</tr>
</table>
关于html - 使用 CSS 将文本覆盖在图像之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32631622/