0

作成しなければならないレスポンシブ サイトについて、非常に不満を感じています。背景画像（ホバー時に変更される）を持つボタンについて疑問に思っていました。img html タグを使用する代わりに、それらを css 背景画像として保持したいと思います。ボタンの 1 つにこの CSS を使用します。

 a.projects 
 {
    background-image: url('css-images/projects.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
  }

私のHTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My site</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>
    <div class="wrapper">
        <div id="menu">
           <ul class="nav">
                <li>
                         <div class="yellow-bar"></div>
                     <a href="#" class="projects" ></a>
                </li>
                <li> .... </li>
           </ul>
       </div>
    </div>
</body>
</html>

問題は、画像が見えないことです。内容がないからだと思います。しかし、私の目的は応答性であるため、コンテンツを追加したり、固定の高さを割り当てたりしたくありません! これを適用したいコンテンツのないバックグラウンド css を使用する他の画像もあります (クラス "yellow-bar" の div )。何か助けはありますか？

4

1 に答える 1

1

ボタンにサイズを指定する必要があると思います。

を与えることができますmin-height/min-width。たとえば、おそらく40pxです。レスポンシブデザインについて分析したところ、ボタンの推奨サイズです。

a.projects 
 {
    min-width: 40px;
    min-height: 40px;
  }

それについて語っているこのプレゼンテーションを見てください (スライド 10) : http://www.slideshare.net/Developpeurs/web202-touch-en-html5-js

于 2013-10-15T11:59:16.947 に答える