html - 按钮上的背景图像不出现

问题描述

我尝试使用 CSS 规则为按钮设置背景图像，但图像没有出现。该按钮是具有“待办事项”类的按钮。规则的其他部分有效，因为按钮的宽度和高度在调整时会做出相应的响应，但图像不会出现。

我尝试使用“背景：url”和“背景图像：url”都没有结果。

这一切的原因是因为我试图构建一个待办事项列表并根据它是否已标记完成来更改按钮图像。

为此，我的计划是使用不同的类创建两个不同的 CSS 规则，每个类都有自己的按钮背景图像（一个代表完整，一个代表不完整）。当有人将项目标记为完成时，我将添加将项目类名称更改为与标记为完成的项目的 css 规则匹配的 js。

如果有人知道执行此部分的更简单方法，欢迎提出建议。

HTML：

.todo{
  background-image: url("../img/check.png");
  width:50px;
  height:50px;
}

    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
        <link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
      </head>
      <body>
        <div class="container">
           <header>
               <input type="text" id="input" placeholder="Add an item"/>
               <button id="button"  type="button">Add item </button>
            </header>
               <div id="list">
    
         <!–– Below li is a template literal added with js. ––&gt;

                  `<li>
                    <div class="item">
                       <div class="complete">
                        <button id="complete" class="todo">Complete</button>
                       </div>
    
                       <p class="text">${value}</p>
    
                        <div class="remove">
                           <button id="` + randomId  +`" class="todo"></button>
                        </div>
                     </div>
                   </li>`;
    
                </div>
            </div>
         <script src="resources/JS/app.js"></script>
      </body>
    </html>

标签： htmlcss

html - 按钮上的背景图像不出现

问题描述

解决方案

推荐阅读