php - 为什么这个 标签上的 `background-image` 不可见？

Question

JSFiddle here.

为什么我的 a.previous-slide-arrow 不是s' 和 a.next-slide-arrow s' background-image可见吗？

我正在处理一个网页，其中我通过 PHP include 包含了用于幻灯片放映的代码。陈述。 在那里，vertical-align适用于a.previous-slide-arrow和 a.next-slide-arrow似乎根本不起作用。

我在这里发布了相同的代码(更改了图像的路径，就像我在本地主机上使用的那样，并更改了一些 PHP for 循环以编写出现 6 次的 <img> 标记 ) - 和奇怪的是 vertical-align确实在这里工作，但是 background-image适用于a.previous-slide-arrow和 a.next-slide-arrow不可见。为什么？

.image-slideshow-container {} .image-slideshow-container img {
  position: fixed;
  display: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
img.slider-image1 {
  display: block;
}
.first-viewport {
  height: 100%;
  width: 100%;
  position: absolute;
  display: table;
}
a.previous-slide-arrow,
a.next-slide-arrow {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  color: transparent;
  opacity: 0.7;
  text-align: center;
  /* =s */
  left: 20px;
  background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png");
  background-repeat: no-repeat;
}
a.next-slide-arrow {
  right: 20px;
  left: auto;
  background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png");
}
.navigation-arrows-container a.previous-slide-arrow:hover,
.navigation-arrows-container a.next-slide-arrow:hover {
  opacity: 1;
}
.navigation-bullets-container {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 60px;
  display: table-cell;
  vertical-align: bottom;
  position: relative;
}
.navigation-bullets-container span {
  display: none;
}
.navigation-bullets-container a {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 5px;
  background: #4b4040;
}
.navigation-bullets-container a:hover {
  background: black;
}
.navigation-bullets-container a.active {
  background: black;
}

<div class="image-slideshow-container">
  <img class="slider-image1" src="http://i992.photobucket.com/albums/af42/webtreatsetc/Textures%20Patterns%20Brushes%20from%20Webtreats/LightBlur.png" alt="pitcher!" />
  <img class="slider-image2" src="http://m.rgbimg.com/cache1vNdB6/users/x/xy/xymonau/600/ooNRizq.jpg" alt="pitcher!" />
  <img class="slider-image3" src="http://cdn.desktopwallpapers4.me/media/thumbs_400x250/3/23394.jpg" alt="pitcher!" />
  <img class="slider-image4" src="http://papers.co/wallpaper/papers.co-sd19-sand-storm-gradient-blur-8-wallpaper.jpg" alt="pitcher!" />
  <img class="slider-image5" src="http://m.rgbimg.com/cache1sw4YI/users/x/xy/xymonau/600/nxXqi9O.jpg" alt="pitcher!" />
  <img class="slider-image6" src="http://previews.123rf.com/images/hospitalera/hospitalera0805/hospitalera080500016/3089997-Halftone-blue-pattern-with-little-dots-and-some-zoom-blur-applied--Stock-Photo.jpg" alt="pitcher!" />
</div>


<div class="first-viewport">

  <a class="previous-slide-arrow" href="#">&lt;</a>

  <div class="navigation-bullets-container">
    <a class="navigation-bullet1" href="javascript: changeImage(1)">
      <span>Bullet</span>
    </a>
    <a class="navigation-bullet2" href="javascript: changeImage(1)">
      <span>Bullet</span>
    </a>
    <a class="navigation-bullet3" href="javascript: changeImage(1)">
      <span>Bullet</span>
    </a>
    <a class="navigation-bullet4" href="javascript: changeImage(1)">
      <span>Bullet</span>
    </a>
    <a class="navigation-bullet5" href="javascript: changeImage(1)">
      <span>Bullet</span>
    </a>
    <a class="navigation-bullet6" href="javascript: changeImage(1)">
      <span>Bullet</span>
    </a>
  </div>

  <a class="next-slide-arrow" href="#">&gt;</a>
</div>

---

编辑:@EternalHour

Answer 1

请使用 background 而不是 background-image 并给出图像的宽度和高度。