CSS背景颜色和图像冲突答案

【问题标题】：CSS Background Colour and Image ConflictingCSS背景颜色和图像冲突
【发布时间】：2014-05-12 19:39:09
【问题描述】：

我有一段我用过很多次的 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 设备也没关系（但如果我在任何桌面浏览器中尝试相同的代码 [并且所有明显的代码都已检查！]，我看不到任何问题完全）。

我已经尝试过 background-size 并将对象的边框设置为 0 - 两者都没有解决问题。

图片本身为 24 像素 x 25 像素，但显示为 18 像素 x 23 像素。

任何建议，还是我应该硬着头皮将整个背景创建为图像并失去背景颜色？

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

【问题讨论】：

能否为您的问题创建一个小提琴jsfiddle.net
您是否尝试过使用背景图像创建另一个类，而不是将其全部放在一个类中？
你试过background-size: cover;
@web-tiki - 如果我已经给出的建议不能解决我的问题，我会设置一些东西
@joeriSmits - 不，我没有，但我会试一试

标签： android html ios css

【解决方案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>

希望这会有所帮助。

【讨论】：

我会试一试（我愿意尝试任何事情！）但你的回答没有意义，因为我的问题是背景图像和图像周围出现的背景颜色显示比实际小。看起来图像并不优先考虑我！
我现在已经试过了，不行；这并不能解决我的问题。我最终会得到白色背景上的白色文本，或者仅在单词周围的黑色背景，而不是延伸到我的元素的整个宽度（取决于我安排代码的方式）。

【解决方案2】：

经过四天的拉扯，我没有解释为什么我在其他地方使用了几十次的代码突然变得枯燥无味，我通过将背景图像设置为全宽解决了这个问题容器（而不是仅 24 像素 x 25 像素）并将其填充为黑色，而不是依靠背景颜色来做到这一点（将右手端留白）。

对该解决方案不满意，但没有其他任何东西，这是我目前最好的解决方案。

【讨论】：