【CSS】画像上に透明ラベルキャプションをオーバラップする方法【実例付き】


考え方

やり方は、吹き出し の時と同じです。
オーバーラップする方(キャプション)は絶対位置指定をして重ねるだけです。

HTML構成

イメージのタグ、その下にキャプションのタグがあると想定します。 その2つを .baseのタグで囲みます。

.base
image
caption

やり方

ベースとなる位置を指定する。

タグで全体を囲みます。それをrelativeにします。

それぞれの位置関係を整理する。

positionで指定します。画像はそのままですが、ベースを relativeに、キャプションを absoluteにします。

キャプションは半透明にする。

background プロパティに rgba指定します。

実行例

 

blender
イメージキャプション

 

キャプションの位置は、調整します。
直打ちでも良いですが、イメージサイズに影響されるため、ちょっと大変です。

<br clear="all"> タグを加えて、残りの後続文の上に入り込まないようにします。

 

コード

 

 

CSSの解釈器だと、 - は文字の一部として解釈されるため、 -, + の場合前後に 空白が必要です(chrome)。 * / は必要ないそうです。

 

関連ページリンク

【CSS】タブメニューをCSSだけでシンプルに作る【動作実例付き】

CSSでカードレイアウトがどこまで出来るか試してみた

【かっこいい】よく見る商品紹介ページのダイナミックなスクロール表示をCSSだけでシンプルに試す【実例付き】

 

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です