背景按钮处的图像答案

【问题标题】：Image at background button背景按钮处的图像
【发布时间】：2016-09-22 13:31:02
【问题描述】：

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

请帮帮我;)

【问题讨论】：

可能你的 CSS 文件在另一个目录中，所以你必须更改 url 中的文件路径
请给 .btn-image css 类中的按钮一些高度
我检查了css文件的路径，没问题！
我添加了高度：100px；但结果是一样的

标签： html css imagebutton

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

这不是。我试图将图像放在项目的根路径中，而没有 ../.../... 仅文件名，并将其复制到当前路径。
如果一切都失败了，请设置你的背景尺寸：100px；使其类似于工作中的 sn-p。