Question

我对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>

请帮帮我;）

Answer 1

如果CSS文件位于与image目录相同级别的目录中，则文件路径必须为

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

Answer 2

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

背景按钮上的图片

2 个答案: