CSS цвет фона и изображения конфликтуют

0

У меня есть часть CSS, которую я использовал несколько раз, которая сочетает фоновое изображение и цвет фона, и до сих пор у меня не было проблем с этим. Однако в этом случае у меня есть странная проблема с мобильными браузерами, где она полностью уменьшает фоновое изображение на 1 пиксель, показывая цвет фона, где я не хочу, чтобы его видели!

CSS:

.navlink {
background-color: #000000;
color: #FFFFFF;
text-decoration: none;
height: 20px;
width: 200px;
margin: 0;
padding: 0;
float: left;
background-image: url(images/navarrowblank.gif);
background-position: top right;
background-repeat: no-repeat;
}

Не имеет значения, к какому элементу HTML применяется класс. Это также не имеет значения, если я использую устройство iOS или устройство Android (но если я попробую тот же код в любом браузере рабочего стола [и он был проверен во всех очевидных!], Я не вижу никаких проблем вообще).

Я уже попробовал размер фона и установил границу объекта в 0 - ни одна из них не разрешила проблему.

Само изображение составляет 24px на 25px, но, похоже, отображает его в 18px на 23px.

Любые предложения, или я должен просто укусить пулю и создать весь фон как изображение и потерять цвет фона?

JSFiddle здесь: http://jsfiddle.net/frustratedwithdotnet/a64VP/2/ (примечание: удалена красная рамка)

  • 0
    не могли бы вы создать скрипку с вашей проблемой, пожалуйста, jsfiddle.net
  • 0
    Вы пытались создать другой класс с background-image вместо того, чтобы поместить все это в один класс?
Показать ещё 9 комментариев
Теги:

2 ответа

0
Лучший ответ

После четырех дней стрижки волос и без каких-либо объяснений, почему код, который я использовал десятки раз в других местах, должен внезапно исчезать, я решил это, сделав фоновое изображение полной шириной контейнера ( вместо 24px на 25px) и заполняя его черным вместо того, чтобы полагаться на цвет фона, чтобы сделать это (оставив правую сторону белого).

Не доволен этим решением, но отсутствует что-то еще лучшее, что у меня есть сейчас.

Поделиться
0

В этом случае вы не можете указать цвет фона и изображение на одном уровне. Иерархия в значительной степени говорит о том, что изображения имеют приоритет над цветами. Чтобы получить эффект, который вы ищете, вам нужно обернуть элемент в div и создать его с цветом фона.

Итак, вы будете смотреть на что-то вроде:

.wrap { background: #000; }
.nav-link { background: url(images/navarrowblank.gif) top left no-repeat; }

<div class="wrap"><div class="nav-link">Lorem Ipsum</div></div>

Надеюсь это поможет.

Поделиться
  • 0
    Я попробую (я готов попробовать что угодно!), Но ваш ответ не имеет смысла, учитывая, что моя проблема в том, что цвет фона отображается вокруг фонового изображения, а изображение отображается меньше, чем оно есть. Не похоже, что изображение имеет приоритет для меня!
  • 0
    Я сейчас попробовал это и нет; это не решает мою проблему. В результате я получаю либо белый текст на белом фоне, либо черный фон только вокруг слов, который не распространяется на всю ширину моего элемента (в зависимости от того, каким образом я располагаю код).

Ещё вопросы

Сообщество Overcoder
Наверх
Меню