我对必须创建的响应式网站感到非常沮丧。 我想知道我的按钮有背景图像(悬停时会改变)。我真的很想将它们保留为 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)。 有帮助吗？
最佳答案
我认为您被迫为按钮指定尺寸。
你可以给它一个min-height/min-width。例如 40px。我对响应式设计做了分析，这是一个推荐的按钮尺寸。
a.projects
{
min-width: 40px;
min-height: 40px;
}
看看这个讲述它的演示文稿(幻灯片 10):http://www.slideshare.net/Developpeurs/web202-touch-en-html5-js
关于html - 响应式设计 : background image button，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19380507/