web-dev-qa-db-ja.com

div内のimgタグを、テキストが上にあるdivの背景画像として使用します

私は次の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;


}

ヒントを事前に感謝します！

htmlcssfrontend
5
user818700

あなたはこの方法でそれを行うことができます：

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

22
Sarower Jahan

あなたが探しているもの z-index 。 Z-indexを使用すると、1つの要素を他の要素の上に配置できます。ただし、z-indexは、絶対配置や相対配置などの配置された要素でのみ機能することに注意してください。

CSSで次のようにz-indexを指定します。

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

使用方法のデモについては、これを参照してください jsFiddle ：

2
Complexity

このコードを使用して、<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;
}
0
Gil Epshtain

これには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>
0
Hitesh Ramola