Question

我想将按钮的图像更改为另一张相同大小的图片，并在一定时间后将其更改回去。例如，您单击房屋的图片，它将变为天空，然后无需执行任何操作即可返回房屋。从第二张图片变回第一张图片之间的时间不应禁止再次单击该按钮。

因此，由于我还很新，所以进行了很多搜索，但找不到关于我的问题或我理解的东西。我用HTML制作了一个按钮，在CSS中链接了一个类，该类具有应该用作按钮的图像的URL。到目前为止，它仍然有效。我该如何继续？

 -> HTML
<button class="buttonn" > 
-> CSS
.buttonn {
 background-image:url([Link to the image]);

Answer 1

您可以考虑激活状态的过渡和延迟：

button {
  padding:20px;
  border:none;
  background-image:
    url(https://picsum.photos/id/1/200/200),
    url(https://picsum.photos/id/10/200/200);
  background-size:0 0,cover; /* The top one invisible*/
  background-position:center;
  background-repeat:no-repeat;
  transition: 0s 1s;
}
button:active {
  background-size:100% 100%,cover;
  transition: 0s;
}

<button>click me</button>

也喜欢这个：

button {
  padding:20px;
  border:none;
  background-image:
    url(https://picsum.photos/id/10/200/200);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition: 0s 1s;
}
button:active {
  background-image:
    url(https://picsum.photos/id/1/200/200);
  transition: 0s;
}

<button>click me</button>

如何通过单击更改按钮的图像？

1 个答案: