html - 分辨率改变时背景移动

Question

我的页面再次出现问题。如果你看一下http://masluzz.panamerik.net/您可以在顶部看到橙色和灰色的菜单。

我需要它在所有分辨率下看起来都不错，因为当我改变分辨率时，橙色比我想要的更向右侧移动。

这是我的 CSS 和带有图形预览的直接链接。 代码:

#sticky {
    padding: 0.0ex;
    width: 100%;
    clear: both;
    color: #transparent;
    font-size: 2em;
    border-radius: 0.0ex;
    background: url(/img/layout/menu.png) 38.5% 0% repeat-y;
    border-radius: 0.0ex;
}

预览图片链接: http://i.stack.imgur.com/GkHfT.png

Answer 1

我不会担心图像并将其更改为 CSS 代码。当他们想要改变并且更一致时，这会容易得多。您需要将菜单的背景设置为橙色，然后向每个应该为橙色的

元素添加一个类。即。

<div id='menu'>
    <ul>
         <li class="orange">Option 1</li>
         <li class="orange">Option 2</li>
         <li class="grey">Option 3</li>
    </ul>
</div>

那么你的 CSS 看起来像这样。

#menu {background:orange;};
#menu>li {float:left; display:inline-block}
.orange {background:orange;} 
.grey {background:grey;}

.orange 甚至可以省略，因为您正在定义#menu div 的背景。但是，这可能需要对您的网站进行一些清理。我注意到几个订单项的高度不同。在清理干净之前，您会遇到背景看起来不正确的问题。