Фоновое изображение выглядит неправильно, когда сайт загружен на мобильное устройство.

Question

В настоящее время у меня есть его, где текущая ссылка «подчеркнута», но подчеркивание - это изображение, так как я хотел, чтобы он выглядел в стиле Android. Изображение выглядит как это, когда веб-страница загружается на обычном настольном компьютере:

само изображение простое изображение с топ 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> 

I также попытались сделать изображение просто синей линией, а сменить css на background-position:bottom, но он сделал всю коробку синей.

Answer 1

Почему бы не просто использовать свойство border-bottom?

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

Проблема связана с телефоном, который регулирует ваши ли, и изображение не масштабируется пропорционально.

Answer 2

Как предложил @natewiley, я рекомендую делать такой простой стиль только с помощью CSS, поэтому вашему клиенту не нужно загружать дополнительные активы (изображения). Но в вашем конкретном случае, поскольку на телефоне изменяется размер элементов списка, что приводит к смещению фонового изображения.

Вы можете попробовать установить background-repeat: no-repeat, чтобы изображение фона не повторялось, чтобы заполнить пробел, поэтому вы должны хотя бы увидеть только одну синюю линию вместо двух. Хотя вам нужно настроить, где должна синяя линия.

Answer 3

Это должно решить проблему:

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

Проблема заключается в фоновом изображении повторяется, для Android устройств, в котором вы просматриваете веб-страницу, либо вы можете запустить медиа запросов для того же, чтобы настроить фоновое изображение только для конкретного разрешения.