我尝试使用 CSS 规则为按钮设置背景图像，但图像没有出现。 该按钮是带有“todo”类的按钮。规则的其他部分起作用是因为按钮的宽度和高度在调整时会做出相应响应，但图像不会出现。
我尝试同时使用“background: url”和“background-image: url”但没有结果。
所有这一切的原因是因为我正在尝试构建一个待办事项列表并根据它是否已标记为完成来更改按钮图像。
为此，我的计划是使用不同的类制作两个不同的 CSS 规则，每个规则都有自己的按钮背景图像(一个用于完整，一个用于不完整)。当有人将元素标记为完成时，我将添加 js，将元素类名称更改为与标记为完成的元素的 css 规则相匹配的名称。
如果有人知道执行此部分的更简单方法，欢迎提出建议。
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. ––>
`<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>最佳答案
为任何组件中的背景图像尝试这个:
.todo {
background-image: url(../../img/check.png);
background-position: Xpx Xpx;
background-repeat: no-repeat;
}
关于html - 按钮上的背景图像不出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58277638/