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

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>