0

私はレスポンシブ Web サイトを設計しており、リンクのリストにはそれぞれ背景画像があります。リンクはインライン ブロック レベルの要素です。

HTML

<li id="tab3"><a href="#dinner" class="current">Dinner</a></li>

CSS

#tabs .nav li { display: inline; }
#tabs .nav li a {display: inline-block; width:165px; height:165px; line-height:160px;}
#tabs .nav li a.current{background: url(image) no-repeat -342px 0;}

特定のブレークポイント (600px) で、ボタンのサイズが小さくなるため、背景画像が適切に収まらなくなります。通常、background-size: 100% を使用して、背景画像がコンテナーのサイズに収まるようにします。この場合、機能していません。

@media only screen and (min-width: 0) and (max-width: 600px){
  #tabs .nav li a{width: 136px; height: 136px; line-height: 131px; }
  #tabs .nav .current{background-size: 100%!important}
}

ここで jsfiddleをセットアップしたので、ご覧ください。(メディア クエリなしで動作することを確認するには、ブラウザを拡大する必要がある場合があります)

600px にブレークポイントが 1 つあります。600px を超えると、テキストの背後に背景画像が表示されます。以下、消えます。これは、背景サイズを 100% に設定したためです。何らかの理由で、これにより背景画像が完全に削除されます。どうすればこれを修正できますか？

4

1 に答える 1