html - 图像在背景按钮

标签 html css imagebutton

我的 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 文件位于与 image 目录相同级别的目录中,则您的文件路径必须为

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

关于html - 图像在背景按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39640484/

相关文章:

javascript - 使用 jQuery 或 Javascript 保护或启用链接的 'href' 属性

css - :not pseudo class selector - css issue 伪类的功能

c# - 使用 ImageButton 打开 URL

android - 如何在 ImageButton 中对齐图像源?

javascript - 加载样式表和 JavaScript 花费的时间太长

html - HTML 文本周围的颜色

网页加载完成后加载 CDN 上的 CSS

javascript - 为无框窗口添加边框 - Electron

java - 从 ArrayList 中选取随机 ImageButton 会引发 NullPointerException

php - 如何在php中显示来自mysql的图像