0
背後に背景色が必要なボタンの水平メニューを作成しています。ボタンイメージは、色が表示される中央の透明な円のある白いボックスです。背景色と透明な画像のHTML表：下の枠線
実際のボタンイメージは複雑になるため、ボタンをコーディングするだけではありません。
この方法は、pxで設定された画像の幅でうまく動作します。しかし、画像の幅をすべて100％に設定してモバイルを反応させると、各ボタンの下端に青い枠線が表示されます。あまりにも他のエッジ上の
そして、時には：https://jsfiddle.net/3e4xv37d/#&togetherjs=tatfPi7B6n
コードスニペット：
@media only screen and (max-width: 600px) {
body[yahoofix] body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
}
body[yahoofix] table {
width: 100% !important;
border-collapse: collapse !important;
}
body[yahoofix] #hidden {
display: none;
}
body[yahoofix] #hidden-2 {
display: none;
}
body[yahoofix] #hidden-3 {
display: none;
}<table align="center" border="0" cellpadding="0" cellspacing="0" width="700">
\t <tbody>
\t \t <tr>
\t \t <td valign="top">
\t \t \t <table border="0" cellpadding="0" cellspacing="0" width="100%">
\t \t \t \t <tbody>
\t \t \t \t \t <tr>
\t \t \t \t \t <td>
\t \t \t \t \t \t <table border="0" cellpadding="0" cellspacing="0" width="480px" align="center">
\t \t \t \t \t \t \t <tbody>
\t \t \t \t \t \t \t \t <td style="background-color: blue; overflow: hidden;"><img src="http://i.imgur.com/8xPmSIR.png" width="100%" /></td>
\t \t \t \t \t \t \t \t <td style="background-color: blue; overflow: hidden;"><img src="http://i.imgur.com/8xPmSIR.png" width="100%" /></td>
\t \t \t \t \t \t \t \t <td style="background-color: blue; overflow: hidden;"><img src="http://i.imgur.com/8xPmSIR.png" width="100%" /></td>
\t \t \t \t \t \t \t \t <td style="background-color: blue; overflow: hidden;"><img src="http://i.imgur.com/8xPmSIR.png" width="100%" /></td>
\t \t \t \t \t \t \t \t <td style="background-color: blue; overflow: hidden;"><img src="http://i.imgur.com/8xPmSIR.png" width="100%" /></td>
\t \t \t \t \t \t \t \t <td style="background-color: blue; overflow: hidden;"><img src="http://i.imgur.com/8xPmSIR.png" width="100%" /></td>
\t \t \t \t \t \t \t </tbody>
</table>
\t \t \t \t \t </td>
</tr>
\t \t \t \t </tbody>
\t \t \t </table>
\t \t </td>
\t \t </tr>
\t </tbody>
</table>おかげで事前に任意の提案のための
Screenshot example from chromeここJSFiddleリンクです。どこでも探していて、このタイプの画像を反応性のあるレイアウトで動作させる方法に関する議論を見つけることはできません。
イメージを使用する理由これはすべてCSSで行うことができます。 –
@Paulie_D最終的なイメージはより複雑になるので、CSSで行うことはできません。これは単なる一時的なイメージです。 –