ID:Kyrr6yXPfvOQ さんの質問

457 views

スプライトシート画像の表示に関して質問があります。

下記"■コード"のように書いたのですがなぜか画像が思うように表示されません。
丸一日試行錯誤したのですが解決できずに困っています。
ご指摘をお願いできれば助かります。

■やりたいこと
スプライトシートで縦に並べた画像のうち一つを、サイトの親要素(ブロック要素)内のサイズに合わせて縮小微調整して表示したい
(スプライト:w100px h60px→サイト:w50px h30pxで表示)

■コード
//html
<h1>
<a></a>
</h1>

//css
h1{
width:50px;
height:30px;
}
a{
display:block;
width:100px;
height:60px;
background-image:url("img/...省略");
background-position:0 -100px;
background-size:cover;
}
■確認環境
iphoneのsafari・PCのchrome

■あやしい挙動
a{}にbackground-sizeの値(pxでも%でもcontainでもcoverでも)を書くと画像が消えてしまいます。
background-size自体を消すと再び表示されます。

宜しくお願いします。

登録日:2017-01-12 · カテゴリー:HTML・CSS

みんなの回答 1 件

2017-01-13 · ID:H.qUcm87xXy1 報告

background-size変えたらpositionの値もいじりなさい

2017-01-13 · ID:gZdtErjUcovI 報告

回答ありがとうございます!
解決出来ました。

回答の受付は終了しました。

関連トピック