在 div 中使用 img 标签作为 divs 的背景图片，上面有文字

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 作为 divs 背景，同时在 img 上显示文字。

另外文章的高度div应该总是180px，我只有下面简单的CSS:

.article {

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


}

提前感谢您的任何提示！

Answer 1

使用

<div class="article" style="background: url(imageurl)">
</div>

Answer 2

您在 z-index 中寻找的内容。使用 Z-index 允许您将一个元素定位在另一个元素之上。但请记住，z-index 仅适用于定位元素，例如绝对或相对定位。

您确实在 CSS 中指定了一个 z-index：

.heading { position: absolute; top: 10px; left: 10px; z-index: 900; color: #fff; }

请参阅此 jsFiddle 以获取有关如何使用它的演示：

Answer 3

你可以这样操作：

<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/

Answer 4

您可以为此使用 CSS 属性 object-fit。但是值得注意的是，这个属性在 IE 和 Edge 浏览器上几乎没有支持。

.conainer{
  position: relative;
  width: 500px;
  height: 300px;
  color: #ffffff;
  overflow: hidden;
  margin: auto;
}
.conainer img{
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s ease;
}
.conainer:hover img{
  transform: scale(1.2);
}
.conainer .content{
  position: relative;
  z-index: 1;
}
.conainer .content h2{
  color: white;
  text-shadow: 3px 2px 10px #545454;
  text-align: center;
}

<div class="conainer">
  <div><img src="https://placeimg.com/640/480/nature" alt=""></div>
  <div class="content">
    <h2>Here's an example</h2>
  </div>
</div>

Answer 5

您可以使用此代码，使 <img> 表现得像背景图片：

<img src="..." class="background-image" />

.background-image {
    position: absolute;
    z-index: -1;
    min-width: 100%;
    min-height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
}

在 div 中使用 img 标签作为 divs 的背景图片，上面有文字

Use img tag inside a div as the divs background image with text over

html

css

frontend