背景不断重复，即使没有重复

Question

button {
  background:#fff;
  padding:0px;
  border:1px solid #ddd;
  cursor:pointer;
  outline:none;
  width:140px;
  height:47px;
  color:#444;
}
.fave {
  width: 70px;
  height: 50px;
  background: url(https://cssanimation.rocks/assets/images/posts/steps/twitter_fave.png) no-repeat;
  background-position: 0 0;
  padding:15px 50px;
}
.fave:hover {
  background-position: -3519px 0;
  transition: background 1s steps(55);
}

<button><div class="fave">Save all</div></button>

因此，当您将鼠标悬停在按钮上时，星形将在无重复区域（我不希望它重复的区域）中重复出现。我试图让它不再重复但是效果并不好。

我希望有人知道这个问题。

修改 很难解决这个问题，我尝试了一些有用的东西（猜测在W3C中无效）。

所以我的解决方案是使用位置将文本放在星号下：

button {
  background:#fff;
  padding:0px;
  border:1px solid #ddd;
  cursor:pointer;
  outline:none;
  width:70px;
  height:70px;
  color:#444;
  position:relative;
}
.fave {
  width: 10px;
  height: 50px;
  background: url('https://cssanimation.rocks/assets/images/posts/steps/twitter_fave.png') no-repeat;
  background-position: 0 0;
  padding:30px 30px;
}
.fave:hover {
  background-position: -3519px 0;
  transition: background 1.0s steps(55);
}
.txt {
  position:absolute;
  bottom:3.5px;
  left:2.5px;
  text-transform:uppercase;
}

<button><div class="fave"><div class="txt">Opslaan</div></div></button>

Answer 1

我稍微调整了css和HTML：DEMO

button {
  background:#fff;
  padding:0px;
  border:1px solid #ddd;
  cursor:pointer;
  outline:none;
  width:140px;
  height:47px;
  color:#444;
}
.next{
  padding: 15px 3px;
      float: left;
}
.fave {
    float:left;
  width: 54px;
  height: 50px;
  background: url(https://cssanimation.rocks/assets/images/posts/steps/twitter_fave.png) no-repeat;
  background-position: 0 0;
}
button:hover .fave{
  background-position: -3519px 0;
  transition: background 1s steps(55);
}

<button><div class="main">
    <div class="fave"></div>
    <div class="next">Save all</div>
    </div></button>