1

http://jsfiddle.net/LFtHg/

初めてのレスポンシブ Web サイトを作成しようとしています。このために、画像を含めています。この画像にはキャプションがあり、透明なオーバーレイで表示する必要があります。ただし、不透明度の設定は子要素に渡されるため、コンテナーからテキストを削除しました。

オーバーレイをまったく表示できません (内部にコンテンツがないため)。ブラウザのサイズの変更に対応するために画像を作成したいので、固定の高さを実際に追加することはできません。これが確実に表示されるようにするにはどうすればよいですか?

ありがとう、J

編集、また、ブラウザのサイズ変更に合わせてオーバーレイをスケーリングする最良の方法は何でしょう。このアプローチが可能かどうかはわかりません。

4

2 に答える 2

3

まず、background: rgba(0,0,0,.5);不透明度の代わりに RGBA バックグラウンド ( ) を使用できます。

次に、幅を明示的に設定する必要がありますspan.figcaption(左と右の両方のオフセット プロパティを指定して設定することもできます)。

おそらく、このデモhttp://dabblet.com/gist/2778608も役立つかもしれません (画像は任意のサイズにすることができます - ブラウザー ウィンドウのサイズを変更して、すべてのサイズがどのように変更されるかを確認してください)。

于 2012-05-24T00:07:11.210 に答える
1

次のルールを既存のサンプルに追加すると、要素が効果的に引き伸ばされて、フィドル.figcaptionが完全にカバーされます。.figure

.figure {position:relative;}
/*these could be different so that the overlay appears larger than the caption*/
span.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
p.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}

キャプションが中央に表示されるように、値を % 設定に任意に調整できます。

ところで、あなたの実装はまだ流動的ではないことを知っていますよね?

于 2012-05-23T22:56:33.080 に答える