在媒體查詢中使用內聯塊的背景大小

我正在設計一個響應式網站和鏈接列表，每個鏈接都有背景圖片。鏈接是內嵌塊級元素。在媒體查詢中使用內聯塊的背景大小

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;}

在某個轉折點（600像素）時，按鈕的大小變小，所以背景圖像不再適合正常。通常，我會使用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 here所以你可以看到。（您可能需要擴展瀏覽器才能看到它在沒有媒體查詢的情況下工作）

在600px處有一個斷點。在600px以上，您將看到文本背後的背景圖像。下面，它消失。這是因爲我設置了100％的背景大小。出於某種原因，這完全刪除了背景圖像。任何想法如何我可以解決這個問題？

來源

2013-05-30 JCHASE11

在元素的100％處，背景大小變爲136px寬，原來的background聲明將其向左移動342px，這意味着元素中沒有任何元素可見。我不確定你的最終目的是什麼，但你必須更改background-position才能顯示出來。

來源

2013-05-30 17:53:08 freejosh

我試過改變背景位置。無論我改變它的座標，仍然沒有背景圖像。在小提琴上試試看，沒有改變！ – JCHASE11

我的意圖是在瀏覽器低於某個斷點時簡單地更改背景圖像的大小（每個鏈接的大小更小，因此背景大小必須更小） – JCHASE11

[這裏是小提琴]（http：// jsfiddle .net/v4V9K/7 /）通過更改背景位置顯示背景...... – freejosh

在媒體查詢中使用內聯塊的背景大小

回答

相關問題