html - 图像上的可滚动文本 HTML/CSS

Question

目前我找不到响应式和可滚动的解决方案来将文本放在图像上。我需要灵活的高度和 100% 的宽度。我尝试使用 position:relative;和 css 背景图像没有运气。当我使用 position: relative;图像顶部有一个空间，删除它的唯一方法是负边距，我认为这是不可持续的，因为有多个帖子。 css 背景不会显示完整图像，除非您设置尺寸并且响应时您无法设置尺寸。我不认为我可以使用绝对位置，因为它不会滚动。所以我不知道该用什么。

我这里有这个HTML代码:

<div class="post">
    <span><a>Posted By Adam</a></span>
    <img width="100%" src="uimg/adam-levine-600.jpg">
</div>

Answer 1

使用 position: absolute; 并为导航添加一个间隔符:

http://jsfiddle.net/ryanpcmcquen/p3bes5xq/

.nav {
  height: 100px;
  width: 100%;
  position: fixed;
  background-color: #21A7F0;
  text-align: center;
  z-index: 10;
  color: #ffffff;
}
.spacer {
  height: 105px;
}
.post span {
  position: absolute;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000000;
}
.post img {
  width: 100%;
}

<div class="nav">nav bar</div>
<div class="spacer"></div>
<div class="post"> <span><a>Posted By Adam</a></span>

  <img src="//fillmurray.com/880/450" />
</div>
<div class="post"> <span><a>Posted By Adam</a></span>

  <img src="//fillmurray.com/880/260" />
</div>
<div class="post"> <span><a>Posted By Adam</a></span>

  <img src="//fillmurray.com/880/194" />
</div>