當網站加載到移動設備上時，背景圖片看起來不正確

我目前已將其添加到當前鏈接「加下劃線」的位置，但下劃線是一個圖像，因爲我希望它看起來像Android風格。圖像看起來是這樣的，當網頁加載在普通臺式機：當網站加載到移動設備上時，背景圖片看起來不正確

enter image description here

圖像本身是具有最高90％的透明，它的藍色底1/8的簡單圖像。每當網頁加載在手機上，它會變成這樣：

enter image description here

它的CSS是這樣的：

#currentlink 
{ 
    background-image:url('../images/menu-underline.png'); 
    background-position:center; 
}

有了這個網站：

<div id="menu"> 
    <ul id="menulinks"> 
    <li><a href="index.html">About me</a></li> 
    <li><a id="currentlink" href="">Apps & Projects</a></li> 
    <li><a href="workwithme.html">Work with Me</a></li> 
    </ul> 
<hr>

我也嘗試將圖像製作成簡單的藍線，並將css改爲background-position:bottom，但它使整個盒子變成藍色。

來源

2014-01-13 AggieDev

嘗試添加background-repeat：repeat-x; – probablyup

爲什麼不只是使用border-bottom屬性？

#currentlink { 
    border-bottom: 5px solid #35B5E5; /* this is your blue color */ 
}

問題出在你的手機正在調整的手機上，並且圖像不成比例地縮放。

來源

2014-01-13 05:26:47 codeaddict

由於@natewiley建議我建議只用CSS做這樣簡單的樣式，所以你的客戶端不必下載額外的資源（圖片）。但在你的特定情況下，由於在手機上列表項目的大小會發生變化，從而導致背景圖像轉移位置。

您可以嘗試設置background-repeat: no-repeat以防止背景圖像重複自己填充空間，所以您至少應該看到一條藍線而不是兩條。儘管您需要調整藍線的位置。

來源

2014-01-13 05:35:34

這應該解決您的問題：

#currentlink { 
background-image:url('../images/menu-underline.png') no-repeat center center fixed; 
}

的問題是你的背景圖片重演，對於Android設備，在你瀏覽的網頁，或者你可以解僱媒體查詢了相同的調整隻有特定分辨率的背景圖像。

來源

2014-01-13 05:58:30 gauravmuk

當網站加載到移動設備上時，背景圖片看起來不正確

回答

相關問題