Question

我对我必须创建的响应式网站感到非常沮丧。我想知道我的按钮有一个背景图像（在悬停时更改）。我真的想把它们作为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，没有我想要应用的内容（div与类“黄色条”）。有什么帮助吗？

Answer 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

响应式设计：背景图像按钮

1 个答案: