CSSで画像にクールでカッコいいキャプションをつける。
画像にクールでカッコいいキャプションを付けてみました。(*’ω’*)
CSSにデザインを書いてClassで呼び出して適応させます。
画像に文字を重ねたい時やキャプションを入れたい時などに使えます。
誰も戦わずに勝ち得た平和なんかない
CSSの書き方
スタイルシートに以下を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.catch-sam { position: relative; overflow: hidden; } .catch-text { position: absolute; color: #fff; left: 0; bottom: 30px; background: rgba(0,0,0,.6); width: 100%; max-width: 600px; padding: 1em 0; } .catch-text p { margin: 0; padding: 0 0.8em; font-size: 150%; text-align: center; } |
HTML（本文）の書き方
本文へは以下を追加してね。
|
1 2 3 4 5 6 |
<figure class="catch-sam"> <img src="画像ファイル" /> <figcaption class="catch-text"> <p>誰も戦わずに勝ち得た平和なんかない</p> </figcaption> </figure> |
応用編
ちょっと応用するとこんな感じにもできます(＾◇＾)
以上、最後まで見て頂きありがとうございます(‘◇’)ゞ
この記事へのコメントはありません。