当网站加载到移动设备上时，背景图像看起来不对

Question

我目前已经将当前链接“加下划线”，但下划线是一个图像，因为我希望它看起来像Android风格。当网页加载到普通台式PC上时，图像看起来像这样：

图像本身是一个简单的图像，顶部90％透明，底部1/8蓝色。每当网页加载到手机上时，它就会变为：

它的css是这样的：

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

使用这个html：

<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，但它使整个框变为蓝色。

Answer 1

为什么不使用border-bottom属性？

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

问题在于你的手机正在调整，而且图像没有按比例缩放。

Answer 2

这可以解决您的问题：

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

问题是您的背景图像会自行重复，对于您在其中查看网页的Android设备，您可以触发媒体查询以仅针对特定分辨率调整背景图像。

Answer 3

正如@natewiley建议我建议仅使用CSS进行这种简单的样式，因此您的客户端不必下载额外的资源（图像）。但在您的特定情况下，由于在手机上，列表项的大小会发生变化，从而导致背景图像移位。

您可以尝试设置background-repeat: no-repeat以防止背景图像重复自身以填充空间，因此您至少应该看到一条蓝线而不是两条蓝线。虽然你需要调整蓝线的位置。