0

我对我必须创建的响应式网站感到非常沮丧。我想知道我的按钮有一个背景图像（悬停时会改变）。我真的很想将它们保留为 css 背景图像，而不是使用 img html 标记。我将此 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 回答