Question

以下是我的HTML代码：

<div id="fh5co-blog-section">
  <div class="container">
    <div class="seller">
      <img src="assets/img/contact.jpg" class="img-responsive">
    </div>
    <h1 class="text-center">Contact Us</h1>
    <p>Get in touch with us for any additional queries, suggestions or feedback regarding any product.</a></p>
  </div>
</div>

我想要实现的是，我想为我已链接的图像添加叠加层，我也希望在叠加层上显示文本。但不知怎的，我无法实现它，我的代码每次都是混乱的。我还搜索了stackoverflow上的各种网站和答案，但我无法找到确切的解决方案。任何人都可以帮我解决这个问题。提前谢谢。

Answer 1

对于你的叠加层，你可以将它插入div（这个div必须有位置：relative）并设置它们的css： position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.3);。之后将图像和文本放在div中。我的例子：http://codepen.io/anon/pen/qrmQgo

如何在图像上添加浅黑色叠加层？

1 个答案: