『食いっぱぐれない』ためのスキル学習ブログ
> 初心者と学ぶ!実践Photoshop講座 <

画像の上に枠と文字を重ねて(キャプション)表示する方法

コード一覧

上部に文字

 

2018.10.3/白米
HTML
<figure class="image">
<figcaption class="cap_4bh">ここにテキスト</figcaption>
<img src="画像のURL" class="img_4bh">
</figure>
CSS
.image{
position:relative;
}

.img_4bh{
width:100%;
}

.cap_4bh{
font-family:sans-serif;
font-size:1.2em;
line-height:2;
width:100%;
height:2em;
left:0;
top:5%;
padding:0.5em;
position:absolute;
background:rgba(255,255,255,.4);
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 1px rgba(255,255,255,.2);
white-space:nowrap;
}
 

2018.10.4/タリアテッレ
HTML
<figure class="image">
<figcaption class="cap_4bh">ここにテキスト</figcaption>
<img src="画像のURL" class="img_4bh">
</figure>
CSS
.image{
position:relative;
}

.img_4bh{
width:100%;
}

.cap_4bh{
font-family:sans-serif;
font-size:1.2em;
color:white;
line-height:2em;
width:100%;
height:3em;
left:0;
top:5%;
padding:0.5em;
position:absolute;
background:rgba(0,0,0,.4);
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 1px rgba(255,255,255,.2);
white-space:nowrap;
}
 

中央に文字

 

2018.10.5/グリル
HTML
<figure class="image">
<figcaption class="cap_4bh">ここにテキスト</figcaption>
<img src="画像のURL" class="img_4bh">
</figure>
CSS
.image{
position:relative;
}

.img_4bh{
width:100%;
}

.cap_4bh{
text-align:center;
font-family:sans-serif;
font-size:1.2em;
line-height:5;
width:100%;
height:5em;
left:0;
top:40%;
padding:0.5em;
position:absolute;
background:rgba(255,255,255,.4);
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 1px rgba(255,255,255,.2);
white-space:nowrap;
}
 

2018.10.6/スープ
HTML
<figure class="image">
<figcaption class="cap_4bh">ここにテキスト</figcaption>
<img src="画像のURL" class="img_4bh">
</figure>
CSS
.image{
position:relative;
}

.img_4bh{
width:100%;
}

.cap_4bh{
text-align:center;
font-family:sans-serif;
font-size:1.2em;
color:white;
line-height:5;
width:100%;
height:5em;
left:0;
top:40%;
padding:0.5em;
position:absolute;
background:rgba(0,0,0,.4);
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 1px rgba(255,255,255,.2);
white-space:nowrap;
}
 

下部に文字

 

2018.10.8/ラーメン
HTML
<figure class="image">
<figcaption class="cap_4bh">ここにテキスト</figcaption>
<img src="画像のURL" class="img_4bh">
</figure>
CSS
.image{
position:relative;
}

.img_4bh{
width:100%;
}

.cap_4bh{
text-align:center;
font-family:sans-serif;
font-size:1.4em;
line-height:6;
width:100%;
height:6em;
bottom:0;
padding:0.5em;
position:absolute;
background:rgba(255,255,255,.4);
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 1px rgba(255,255,255,.2);
white-space:nowrap;
}
 

2018.10.9/ステーキ
HTML
<figure class="image">
<figcaption class="cap_4bh">ここにテキスト</figcaption>
<img src="画像のURL" class="img_4bh">
</figure>
CSS
.image{
position:relative;
}

.img_4bh{
width:100%;
}

.cap_4bh{
text-align:center;
font-family:sans-serif;
color:white;
font-size:1.4em;
line-height:6;
width:100%;
height:6em;
bottom:0;
padding:0.5em;
position:absolute;
background:rgba(0,0,0,.4);
overflow:hidden;
text-overflow:ellipsis;
text-shadow:1px 1px 1px rgba(255,255,255,.2);
white-space:nowrap;
}
 
解説
・text-ovreflow:ellipsis;
画像のテキストが一行に収まらなくなった時に『…』を表示してくれます。

ステーキステーキステーキステーキステーキステーキステーキステーキステーキ
 
飯テロやめろ

男の子

コメントを残す

メールアドレスが公開されることはありません。