css - 同じ DIV 内の不透明な背景を持つ画像とテキスト

Question

不透明度のある画像とテキストを作成しようとしています!

背景は、画像を背景として使用せずに同じ div に表示されます。どうすればこれを機能させることができますか？

親切に画像を参照してください:

Answer 1

<div>
  <span>Title</span>
  <img src="" />
</div>

div{
  position: relative;
}
span{
  background: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 6px;
  display: block;
}

Answer 2

/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.5 opacity */
background: rgba(0, 0, 0, 0.5);

rgba の場合、最後のフィールドは不透明度です。ただし、一部の古い IE バージョンでは完全にサポートされていないため、現時点で唯一の完全なクロス ブラウザーの方法は、背景として透明な画像を使用することです。

Answer 3

書くbackground-color:rgba(0,0,0,50);と背景が黒く半透明になります。

テキストの透明度を設定するため、テキストの透明度には影響しません。それをcolor:rgba(255,255,255,50);書かないと、テキストは半透明になりません。

Answer 4

最初に行うべきことは、HTML を記述することです。

<figure>
    <img src="/image.jpg">
    <figcaption>Title</figcaption>
</figure>

あとは CSS を書くだけです: 例:

figure {
  position: relative;
}
figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.3); // or transparent gif
}