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


考え方

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

HTML構成

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

.base
image
caption

やり方

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

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

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

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

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

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

実行例

 

blender
イメージキャプション

 

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

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

 

コード

 

        <div class="base">
 		<img src="https://s0.wordpress.com/mshots/v1/https%3A%2F%2Fblender.jp%2F?w=250&#038;h=250"
                     alt="blender" width="250" height="250" class="alignnone" />
                 <div class="overlapcaption">
                      イメージキャプション
                 </div>
	</div>

 

.base{
    position:relative;
}
.base .overlapcaption{
    position: absolute;
   
    background-color: rgba( 222, 200, 200, 0.8 ); 
    /*キャプションの形と位置*/
     top: calc(100% - 12px);
     top: -webkit-calc(100% - 12px);
    left: 0; 
    width: 100%;
}
CSSの解釈器だと、 - は文字の一部として解釈されるため、 -, + の場合前後に 空白が必要です(chrome)。 * / は必要ないそうです。

 

関連ページリンク

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

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

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

 

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

1,416 views.



コメントを残す

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