1

私は問題があります。

私はレスポンシブ ヘッダー画像を作成しています。これはモバイルに縮小され、画面の全幅を占めます。

タグでこれを行い、img100% の最大幅を適用したかったのですが、この画像の上にテキストを含めたかったので、代わりに背景画像を使用することにしました。これはモバイルで問題を引き起こすため、画像の上にテキストを絶対的に配置したくありません。

また、背景画像についてですが、これは ie8 ではサポートされていないため、background-size は使用できません。

画像がコンテナの全幅と画像の全高を占める画像の上にテキストを表示する方法は他にありますか?

4

1 に答える 1

2 
<div id="container" style="height: 100px; width:100px; display:block;">
  <img src="some-img.jpg" style="display:block;"/>
  <span style="position:absolute;">Text over image</span>
</div>

基本的に、親内の画像の上にテキストを配置するだけです。

z-indexプロパティは、複数の競合する要素がある場合に、要素を視覚的に「積み重ねる」のに役立ちます。

于 2013-01-09T16:33:28.533 に答える