6

画像のサイズと正確に一致する無地のオーバーレイを作成し、そのオーバーレイにテキストを表示しようとしています。可能であれば、HTML と CSS のみでこれを行いたいと考えています。

オーバーレイなしの画像

オーバーレイとテキストを含む画像

画像は任意のサイズにすることができ、親コンテナー内に収まるようにサイズ変更され、中央に配置されます。このようなもの（機能しません）：

HTML:

<div class="img-overlay">
  <img src="file.jpg">
  <div class="overlay">Text will flow...</div>
</div>

CSS:

.img-overlay img {
  margin: 0 auto;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
  background-color: rgba(255,255,255,0.5);
}

ここでは HTML5 の<figure>タグが役立つのではないかと考えましたが、その面ではあまり成功していません。次の例では、キャプションの幅を画像の幅に固定したままにしていますが、ドキュメント フローからキャプションを削除して画像の上に配置しようとすると、画像が中央に配置されているため、画像の左側に配置されてしまいmargin: 0 auto;ます。

<figure>
  <img src="file.jpg">
  <figcaption>Text will flow...</figcaption>
</figure>
4

2 に答える 2

7

私はあなたのために例を作りました。 http://jsfiddle.net/kb3Kf/2/

欠けていた主なものは、次のように、テキストに絶対位置を指定しましたが、ラッパーに相対位置を指定しなかったことです。

.img-overlay
{
    position: relative;
}

それは本当に簡単です、あなたは多くの方向にそれを取ることができます. それがあなたが望んでいたものかどうか教えてください。

于 2013-08-11T19:14:07.300 に答える