0
爲客戶端製作一個parallax WordPress網站，我有一個導航欄，每個鏈接都有一個用於背景圖片的精靈。您可以在這裏看到七個鏈接導航欄（http://www.aishla.com/blog/2014/my-aish-test/）。現在它在桌面上看起來不錯，但我想讓這些圖像響應。換句話說，隨着設計越來越小，變得越來越小。CSS：在響應式導航欄中作出響應和縮放的背景圖片鏈接
所以我認爲我可以在CSS中使用背景大小設置，但是當我在媒體查詢中嘗試時，我得到了整個精靈內部的href而不僅僅是我想要的圖像部分。所以我想知道如果這樣做甚至有可能完成這種方式，或者如果我堅持爲不同的屏幕分辨率創建一系列精靈。下面是我使用的是什麼嘗試，使這項工作的一個例子：
首先在桌面版：
nav ul.sub-nav li a { background-image: url("../aish/images/subnav.gif"); background-repeat: no-repeat; color: #000; float: left; height: auto; margin: 0; padding: 80px 0 0 0 ! important; font-size: 16px;font-weight: 700; text-transform: uppercase; text-align: center; width: 137px; }
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; }
nav ul.sub-nav li:first-child a:hover { background-position: 0px -140px; }
現在媒體查詢FIOR最大寬度768px：
nav ul.sub-nav { float: none; width: 763px; margin: 0 auto; padding: 0; height: auto; list-style-type: none; }
nav ul.sub-nav li a { background-size: 79.562% 79.562%; padding: 80px 0 0 0 ! important; font-size: 14px; width: 109px; }
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; }