画像の中に文字(テキスト)や別画像を重ねて表示する。
CSSに position:relative; & position:absolute; を使うのがポイントです。
画像に文字入れ!
1.html
1 2 3 4 5 6 7 |
<div style="position:relative;"> <P style="text-align:center;"> <img src="画像のurl" style="max-width:95%;"> </p> <p><img class="ireko_gazo" src="画像のurl"></p> <p class="ireko_char">画像に文字入れ!</p> </div> |
- 行番
- 説 明
- 1
- 背景画像とその中に重ねる入れ子画像と文字列を1つのボックス(親)として、親ボックスに、「posision:relative」と設定する。
- 2-4
- 背景画像の中央寄せと%サイズ指定
- 5
- 入れ子画像 下記cssの ireko_gazo 参照
- 6
- 重ねる文字列 下記cssの ireko_char 参照
2.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.ireko_char { position:absolute; top:35%; left:20%; font-size:150%; font-weight:bold; color:red;} .ireko_gazo { position:absolute; left:50%; top:2%; max-width:35%; max-height:35%;} @media only screen and (max-width: 480px) { .ireko_char {font-size:100%;} } @media only screen and (min-width:481px) and (max-width:780px) { .ireko_char {font-size:120%;} .ireko_gazo {left:60%;} } |
- 行番
- 説 明
- 2-4
- 画像に position:absolute; を指定。重ねる文字列の位置指定の起点は左上頂点で、通常はpxで指定しますが、この指定ではレスポンシブ対応ページにうまく表示出来ないため、%指定にしています。
- 5-7
- 文字列の修飾。
- 9-11
- 画像にposition:absolute; を指定し、左からと上からの位置の指定(%で指定)
- 12-13
- 大きめの画像をアップしたため、小さめに指定。そのため高さheightの指定は必須。サイズを画面表示サイズでアップすれば、ここは不要。
- 14-
- レスポンシブ対応用に、文字サイズや入れ子画像の位置調整
☆ 補足:入れ子にする画像は、透過するタイプにします。この例では、透過GIFです。