響應式設計：背景圖像按鈕

我對我必須創建的響應式網站感到非常沮喪。我想知道我的按鈕有一個背景圖像（這是在懸停更改）。我真的很想把它們保留爲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

響應式設計：背景圖像按鈕

回答

相關問題