擬似クラスのcontentに直接画像を設定してしまうとサイズ変更が出来ない為、不便ですよね。
そこで、擬似クラスの背景として画像を入れることでbackground-sizeでサイズ変更を出来るようにします。
そうすることでレスポンシブデザインにも柔軟に対応できます。
↓をコピペでwidth、height、background-imageの指定を変えるだけでOK。
(場合によっては場所指定も変えてくださいね)
a:before {
content: '';
display: inline-block;
width: 00000px;
height: 00000px;
background-image: url(../img/img.png);
background-size: contain;
vertical-align: middle;
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
}
0コメント