html - 背景图片无法正确加载

我试图将背景图像添加到跨度中，但是由于某种原因，它似乎无法正确加载。 jsfiddle在下面。

附言：我知道它有点直达“它不起作用的问题”，只是卡住了一段时间而找不到答案

http://jsfiddle.net/whnb3yf2/46/

<div class="learn">
<a>Learn More</a>
<span></span>
</div>

.learn
 {
 width: 200px;
 height: 60px;
 font-family: 'Open Sans',sans-serif;
 background-color: transparent;
 border:2px solid #fff;
 position: relative;
 text-align: center;
 font-size: 18pt;
 line-height:60px;
 overflow: hidden;
  }

 .learn a
 {
 color: white;
 display: block;
 transition: all 0.2s ease-in-out;
   }
   .learn:hover {
   background-color: white;
   }

  .learn:hover a
   {
   color: black;
   margin-left: -20px;
    }

   .learn span
    {
    background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-128.png) center;
    display: block;
    width: 9px;
    height: 16px;
    position: absolute;
    top: 22px;
     left: 110%;
     transition: all 0.2s ease-in-out;
    }

   .learn:hover span{
     left: 80%;
    }

   body {
    background-color: black;
      }

最佳答案

您需要在background-size: 9px 16px;规则中添加.learn span。

.learn {
  width: 200px;
  height: 60px;
  font-family: 'Open Sans',sans-serif;
  background-color: transparent;
  border:2px solid #fff;
  position: relative;
  text-align: center;
  font-size: 18pt;
  line-height:60px;
  overflow: hidden;
}
.learn a {
  color: white;
  display: block;
  transition: all 0.2s ease-in-out;
}
.learn:hover {
  background-color: white;
}
.learn:hover a {
  color: black;
  margin-left: -20px;
}
.learn span {
  background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-128.png) center center;
  background-size: 9px 16px;
  display: block;
  width: 9px;
  height: 16px;
  position: absolute;
  top: 22px;
  left: 110%;
  transition: all 0.2s ease-in-out;
}
.learn:hover span{
  left: 80%;
}
body {
  background-color: black;
}

<div class="learn">
  <a>Learn More</a>
  <span></span>
</div>

关于html - 背景图片无法正确加载，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32057202/