0

Flash Web サイトのモバイル フレンドリーなレスポンシブ バージョンを作成しています。私が直面している問題は、トップメニューの各背景画像の幅が異なるため、それらを並べて適切に設定できず、同時に均一なサイズにすることができず、収まるようにスケーリングされていることですコンテナ。

これは、背景画像とホバー効果を使用したリスト スタイルのメニューです。background-size:contain を使用しています。

これは私の 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

  • 実際のコンテンツには背景画像を使用しないでください。この場合、テキスト自体は Web フォントを使用した方がよく、背景画像は単なるテクスチャになります。何らかの理由で画像が必要な場合は、適切なテキストを含むimgタグを使用する必要があります。altなんらかの理由で本当にこれと戦いたい場合は、アクセシビリティのために少なくともタグにコンテンツを含める必要があります。

  • 背景画像からテキストを分離すること (これは強く推奨され、CSS3 フォント サポートの機能を使用してそれを行わない理由はほとんどありません) は、すべてのレイアウトの問題を解決します。より制御された動的サイズの背景画像が必要な場合は、 「スライドドア」アプローチを使用します。

于 2012-09-26T20:54:56.303 に答える