為什么該<a>標簽</a>上的“背景圖片” <a>不可見？</a>

Question

JSFiddle在這里。

為什么我的a.previous-slide-arrow s和a.next-slide-arrow s的background-image a.next-slide-arrow ？

我正在一個網頁上，其中通過PHP include語句在幻燈片中包含了此代碼。 在那里，應用於上a.previous-slide-arrow和a.next-slide-arrow的vertical-align似乎根本不起作用。

我在這里發布了相同的代碼（ 將圖像的路徑更改為與我在本地使用的圖像相同的路徑，並更改了一些PHP for循環以編寫出現6次的<img>標簽 ）- 奇怪的是， vertical-align確實起作用此處，但看a.previous-slide-arrow應用於上a.previous-slide-arrow和a.next-slide-arrow的background-image 。 為什么？

 .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

請使用背景而不是背景圖片，並提供圖片的寬度和高度。

Answer 2

您可以添加此background-size: contain; 到上一個和下一個箭頭類。

Answer 3

只需添加“背景大小：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;
    ...
}