前後に画像を付けたいとき(前後に括弧などを付けたいなど)は、backgcound-imageで画像をもう一枚追加すれば良い。
HTML
|
1 2 3 |
<h1>見出し見出し</h1> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
h1 { font-size: 32px; line-height: 48px; text-align: left; padding-left: 70px; /* 見出しの文字と画像が重ならないように */ background-image: url('crown.png'); background-position: center left; background-repeat: no-repeat; /* サイズは画像の元サイズを利用して計算 もちろん、普通にpxで指定しても良い */ background-size: calc(418px * 0.16) /* width */ calc(300px * 0.16); /* height : 48px , line-heightと合わせる*/ } |
コメントを残す