0

我正在创建 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>

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

非常感谢提前！！

4

1 回答 1

2

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

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

于 2012-09-26T20:54:56.303 回答