html - Css 按钮 Sprite

Question

我正在努力完成这个 Sprite，但我卡住了，无法找到解决方案。

FIDDLE HERE

我有一个简单的按钮:

<a href="#" class="ui-button sub-beta-button">
  <span class="button-content">Beta Sign-Up</span>
</a>

和CSS:

.sub-beta-button {
  height: 78px;
  background: transparent url("http://i.imgur.com/PSpIGLA.png") 100% -160px no-repeat;
  padding-right: 50px;
  margin-left: 30px;
  bottom: 18px;
  z-index: 1;
  position: relative;
}

.ui-button {
  background: 0;
  border: 0;
  cursor: pointer;
  display: inline-block;
  height: auto;
  overflow: visible;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  outline: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.sub-beta-button .button-content {
  background-image: url("http://i.imgur.com/PSpIGLA.png");
  padding-left: 50px;
  color: #fff;
  font: normal normal 18px/86px "Bliz Quadrata", Times New Roman;
  text-transform: uppercase;
  text-shadow: 0 0 4px #000, 0 0 8px #000;
  overflow: hidden;
  min-width: 110px;
  margin-left: -30px;
  height: 76px;
  z-index: 2;
}
.ui-button span {
  outline: 0;
  display: inline-block;
  background-repeat: no-repeat;
}

但我只得到这个结果:

那是雪碧:

FIDDLE HERE

Answer 1

您的 .ui-button 类移除了背景(background: 0)。

您最好先让按钮在没有 ui-button 类的情况下工作，然后逐条填充 ui-button 类。这样您就可以确定您使用的是最少且正确的 css。