html - 使用 div 内的 img 标签作为带有文字的 div 背景图片

Question

我有以下 html:

<div class="article">
  <img src="..." class="article-bg">
  <h1 class="heading">Article Heading</h1>
  <h2 class="author">Author Name</h2>
</div>

文章divs背景图片是动态设置的，所以在css中设置divs背景不行，我必须使用图片标签。我不太确定如何使用 img 作为 div 背景，同时在 img 上显示文本。

文章div的高度也应该始终为180px，我只有以下简单的CSS:

.article {

  height: 180px;
  padding: 10px;
  background-color: blue;


}

提前感谢您的任何提示!

Answer 1

你可以这样做:

<div class="article">
      <img src="http://www.bdembassyusa.org/uploads/images/beautiful-Bangladesh-23.jpg" class="article-bg">
      <h1 class="heading">Article Heading</h1>
      <h2 class="author">Author Name</h2>
</div>

在下面添加更多 CSS:

.article{
  height: 180px;
  padding: 10px;
  background-color: blue;
  overflow:hidden;
}
.article img{
    position:absolute;
    z-index:0;
    width: 100%; // make the img fluid
    height:200px;
    margin:-10px;
    object-fit: contain; // similar to `background-size: contain;`
}
.article h1,.article h2{
    position:relative;
    z-index:1;
}

在 jsfiddle 上测试它: http://jsfiddle.net/sarowerj/o9L72do0/