Question

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

这是一个使用背景图像和悬停效果的列表样式菜单。我正在使用background-size：contains。

这是我的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

不要将背景图片用于实际内容的东西......在这种情况下，文本本身最好使用网络字体，背景图像就是纹理。如果您出于某种原因需要图片，则应使用带有正确img文字的alt标记。如果由于某种原因你真的想与之斗争，你至少应该在标签中包含可访问性的内容。
将文本与背景图像分开（高度推荐，并且没有理由不使用CSS3字体支持的功能）将解决所有布局问题如果你需要一个更加控制的动态大小的背景图像，你应该使用“推拉门”方法。

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

1 个答案: