为什么不是这个<a> tag not visible?</a>上的`background-image`

Question

JSFiddle here.

为什么我的a.previous-slide-arrow s＆＃39;和a.next-slide-arrow s＆＃39; background-image可见了吗？

我正在开发一个网页，其中我通过PHP include语句为幻灯片显示了此代码。 在那里，应用于vertical-align和a.previous-slide-arrow的{​​{1}}似乎根本不起作用。

我在这里发布了相同的代码（将路径更改为我在那里使用的那些在localhost上，并更改了一些PHP for循环以写入出现6次的a.next-slide-arrow标记） - 并且奇怪地<img>在这里工作，但应用于vertical-align和background-image的{​​{1}}不可见。为什么？

＆＃13;

＆＃13;

a.previous-slide-arrow

＆＃13;

a.next-slide-arrow

＆＃13;

＆＃13;

＆＃13;

---

编辑：@EternalHour

Answer 1

请使用背景代替背景图片，并提供图片的宽度和高度。

Answer 2

您可以将此background-size: contain;添加到上一个和下一个箭头类。

Answer 3

只需添加“background-size：100％50％;”

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;
  background-size: 100% 50%;   
}

Answer 4

这是因为您使用的是后台网址，在这种情况下，您需要为容器指定width和height。在这种情况下a，否则它将不可见。

a.previous-slide-arrow, a.next-slide-arrow {
    height: 128px;
    width: 128px;
    ...
}