Question

我尝试在跨度中添加背景图像，但由于某种原因，它似乎没有正确加载。 jsfiddle在下面。

P.S-我知道它有点直接“它不起作用的问题”只是卡住了一段时间找不到答案

<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;
      }

Answer 1

您需要将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>

Answer 2

您遇到的问题是按钮的背景图片太小。您可以通过将背景大小设置为等于按钮的大小来解决此问题。有关background-size属性的更多信息，请查看http://www.w3schools.com/cssref/css3_pr_background-size.asp

＆＃13;

.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 15px;
  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;
}

＆＃13;

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

＆＃13;

背景图片未正确加载

2 个答案: