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">
      <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;
    height:200px;
    margin:-10px;
}
.article h1,.article h2{
    position:relative;
    z-index:1;
}

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

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

您可以为此使用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 4

您可以使用以下代码，使<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;
}

Answer 5

使用

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

在div中使用img标签作为带有文本的div背景图像

5 个答案: