4

レスポンシブで透明な CSS キャプションを画像の上に作成する適切な方法は何ですか?古いブラウザーでは適切に劣化しますか?

私は達成しようとしています:

  • 中央揃えの画像の縦列
  • 画像の高さと幅が等しい
  • 各画像にはキャプションがあり、中央に配置する必要があります
  • キャプションの背景はシースルーにする必要があります
  • 透明化をサポートしていない古いブラウザで背景が黒くなったらいいのに

この Fiddle exampleを見ると、明らかに多くの問題があります。

HTML5 の基本的な前提は次のとおりです。

<section>
    <figure>
        <img src="1.jpg">
        <figcaption>Caption 1</figcaption>
    </figure>

    <figure>
        <img src="2.jpg">
        <figcaption>Caption 2</figcaption>
    </figure>

    <figure>
        <img src="3.jpg">
        <figcaption>Caption 3</figcaption>
    </figure>
</section>

しかし、CSS3 コードで問題が発生します。それは正しいアプローチですか？微調整（含まれていません）で動作するようになりましたが、とにかく微調整は意味をなさないようです。

たとえば、これは結果です。

ここに画像の説明を入力

CSS が多くのレベルで間違っていると感じています (しゃれが意図されています)。

4

1 に答える 1

9

CSSを少し修正しました。position: relative;主な変更点は、親要素とposition: absolute;キャプションへの追加です。

CSS :

section {
    overflow: auto;
}

section figure {
    float: left;
    clear: both;

    position: relative;
    overflow: auto;

    margin: 0 auto;
    padding: 30px 0 0 0;
    font-size: 15px;
}

section figure img {
    vertical-align: bottom;
}

section figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff; 
    padding: 10px;
}


section {
    padding-bottom: 30px;
    background: #ccc;

}

デモ: http://jsfiddle.net/XjthT/6/

于 2012-10-28T23:32:08.487 に答える