CSS - 菜单上的统一响应式背景图像

Question

我正在创建 Flash 网站的移动友好响应版本。我面临的问题是顶部菜单上的每个背景图像都有不同的宽度，所以我无法正确地并排设置它们并同时具有统一的大小，它们正在缩放以适合容器。

这是一个使用背景图片和悬停效果的列表样式菜单。我正在使用背景大小:包含。

这是我的 CSS，它对所有元素重复:

ul.menu {
   list-style:none;
   position:relative;
   z-index:1;
   right:24px;
   top:-100px;
   margin-bottom:-32px;
   display:inline-block;
   text-align:right;
   height:30px;
   width:100%;
   float:right;
}

ul.menu li {
   display:inline-block;
   list-style-image:none !important;
   text-align:right;
   width:15%;
   height:100%;
   float:right;
}

li.roca a {
   background: url(../images/roca1.jpg) no-repeat 0 0;
   position:relative;
   display:block;
   height:100%;
   -moz-background-size:contain; 
   -webkit-background-size:contain; 
   background-size:contain;
}

li.roca a:hover {
   background: url(../images/roca2.jpg) no-repeat 0 0;
   -moz-background-size:contain; 
   -webkit-background-size:contain; 
   background-size:contain;
}

这是我的 HTML:

<ul class="menu">
    <li class="roca"><a href="http:..." target="_blank"></a></li>
    <li class="img2"><a href="http:..." target="_blank"></a></li>
    <li class="img3"><a href="http:..." target="_blank"></a></li>
    <li class="img4"><a href="http:..." target="_blank"></a></li>
    <li class="img5"><a href="http:..." target="_blank"></a></li>
</ul>

有没有人知道什么代码可以解决这个问题？

提前致谢!

Answer 1

• 不要为实际内容的内容使用背景图像...在这种情况下，文本本身最好使用网络字体，而背景图像只是纹理。如果您出于某种原因需要图像，您应该使用带有适当 alt 文本的 img 标签。如果出于某种原因你真的想反对这个，你至少应该在标签中包含可访问性的内容。

• 将文本从背景图像中分离出来(这是强烈推荐的，并且由于 CSS3 字体支持的强大功能，没有理由不这样做)将解决所有布局问题如果您需要更受控制的动态大小背景图像，您应该使用“滑动门”方法。