Question

我有一块CSS，我已多次使用它结合了背景图像和背景颜色，到目前为止，我没有遇到任何问题。然而，在这种情况下，我在移动浏览器中遇到了一个奇怪的问题，它将背景图像缩小了1px，显示了我不想要它的背景颜色。见过！

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 - 两者都没有解决问题。

图像本身为24像素x25像素，但似乎以18像素×23像素显示。

任何建议，或者我应该咬紧牙关并将整个背景创建为图像并丢失背景颜色？

JSFiddle在这里设置：http://jsfiddle.net/frustratedwithdotnet/a64VP/2/（注意：删除红色边框）

Answer 1

在这种情况下，您无法在同一级别指定背景颜色和图像。层次结构几乎说图像优先于颜色。要获得您正在寻找的效果，您需要将元素包装在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>

希望这有帮助。

Answer 2

经过四天的拖拽，并且没有解释为什么我在其他地方使用过几十次的代码应该突然变得干脆，我已经通过制作背景图片解决了这个问题容器的整个宽度（而不是仅仅24px乘25px）并将其填充为黑色而不是依靠背景颜色来做到这一点（将右手端保持白色）。

对这个解决方案不满意，但没有其他任何东西，这是我现在所拥有的最好的。

CSS背景颜色和图像冲突

2 个答案: