圖像在背景按鈕

我有一個小問題的CSS文件。我創建了一個hmtl文件和css文件樣式，我的想法放在按鈕窗體的背景中。當我使用CSS文件不起作用，但我使用按鈕的樣式參數工作正常，我不明白。圖像在背景按鈕

我的HTML/CSS代碼是這樣的：

@charset "UTF-8"; 
 

 
/* CSS Document */ 
 

 
body { 
 
    text-align: center; 
 
} 
 
.btn-image { 
 
    width: 300px; 
 
    background-image: url('/images/ok/login-login-on.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Test - Log in</title> 
 
    <!-- Bootstrap --> 
 
    <link href="assets/css/style.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-6 col-md-4 col-md-offset-4"> 
 
     <img src="images/ok/Logo.png" width="200" height="200" alt="" /> 
 
     <br></br> 
 
     <div class="box-center"> 
 
      <form action="connectdb.php" method="post"> 
 
      <input type="text" class="txtbox-login-image" placeholder="Usuario" name="username" required autofocus> 
 
      <input type="password" class="txtbox-password-image" placeholder="Password" name="password" required> 
 
      <!-- This option is not works --> 
 
      <button class="btn-image" type="submit">Submit</button> 
 
      <!-- This option is works --> 
 
      <button style="background-image: url('images/ok/login-login-on.png'); width: 100px; border: 1px solid #fff; margin: 0 auto; display: block;">Login</button> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

請幫助我;）

來源

2016-09-22 ruzD

也許你的CSS文件在另一個目錄，所以你必須改變urlpath中的文件路徑 – Johannes

請給一些高度按鈕.btn-image css類 –

我已經檢查了css文件的路徑，它是好！ – ruzD

button[type="submit"] { 
    background: url('path/to/file'); 
    ... 
}

來源

2016-09-22 13:35:22 Teejten

這不是。我試圖把圖像放在項目的根路徑中，而沒有../.../...只有文件的名稱，並且在當前路徑中複製。 – ruzD

如果一切都失敗，則設置background-size：100px;以便它類似於工作片段。 – Teejten

它解決了！謝謝Teejten！ – ruzD

如果CSS文件是在一個目錄處於同一水平作爲image目錄，您的文件路徑必須是

background-image: url('../images/ok/login-login-on.png');

來源

2016-09-22 13:37:45 Johannes

圖像在背景按鈕

回答

相關問題