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

我对我必须创建的响应式网站感到非常沮丧。我想知道我的按钮有一个背景图像（这是在悬停更改）。我真的很想把它们保留为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没有内容，我想申请这个（黄金级“黄色酒吧”的股利）。有什么帮助吗？

来源

2013-10-15 Harmonia

我认为你不得不给你的按钮大小。

你可以给它一个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-15 11:59:16 Emilie

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

回答

相关问题