圖片庫，顯示帶有背景圖片的圖片

Question

您好，我得到了這個圖像庫，我試圖將其從使用圖像更改為帶有background-images:url()但是由於某種原因它不起作用，有人知道嗎？

 var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }

 /* Position the image container (needed to position the left and right arrows) */.container3 { position:absolute; height:100%; width:60%; margin:auto; right:0; left:0; } /* Hide the images by default */.mySlides { display: none; } /* Add a pointer when hovering over the thumbnail images */.cursor { cursor: pointer; }.row { width:100%; display:flex; } /* Add a transparency effect for thumnbail images */.demo { opacity: 0.6; }.active, .demo:hover { opacity: 1; }

 <div class="container3"> <div class="mySlides"> <div class = "bb" style="background-image:url(https://i.stack.imgur.com/FyV3d.gif);"></div> <:-- The above div is the problem --> </div> <div class="mySlides"> <img src="https.//i.stack.imgur.com/FyV3d:gif" style="width:100%"> </div> <div class="row"> <div class="column"> <img class="demo cursor" src="https.//lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo?jpg:sz=328" onclick="currentSlide(1)" width="100%" alt="text"> </div> <div class="column"> <img class="demo cursor" src="https.//i.stack.imgur.com/FyV3d.gif" width="100%" onclick="currentSlide(2)" alt="text"> </div> </div> </div>

正如您所看到的，當您按下 cat img 標簽時它可以工作，但是當我按下紳士時，它不會在大圖中顯示該圖像。 這是為什么？ 我的腳本是否僅適用於 img 標簽？

Answer 1

使用background-image屬性的正常情況是在 body 中，它的高度已經定義。 來自 w3schools.com

body {
 background-image: url("paper.gif");
}

正如您從普通的 img 標簽中注意到的那樣，圖像的顯示沒有任何關於其高度的說明。 這同樣不適用於 div。

在這種情況下，您忘記使用包含您的圖像 url 的 class bb告訴 div，實際高度有多大，這將導致您看不到的東西。

這是一個如何實現您想要的示例：

 var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }

 /* Position the image container (needed to position the left and right arrows) */.container3 { position:absolute; height:100%; width:60%; margin:auto; right:0; left:0; }.bb{ height:400px; background: center center no-repeat; background-size: cover; } /* Hide the images by default */.mySlides { display: none; } /* Add a pointer when hovering over the thumbnail images */.cursor { cursor: pointer; }.row { width:100%; display:flex; } /* Add a transparency effect for thumnbail images */.demo { opacity: 0.6; }.active, .demo:hover { opacity: 1; }

 <div class="container3"> <div class="mySlides"> <div class = "bb" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328);"></div> <:-- The above div is the problem --> </div> <div class="mySlides"> <img src="https.//i.stack.imgur.com/FyV3d:gif" style="width:100%"> </div> <div class="row"> <div class="column"> <img class="demo cursor" src="https.//lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo?jpg:sz=328" onclick="currentSlide(1)" width="100%" alt="text"> </div> <div class="column"> <img class="demo cursor" src="https.//i.stack.imgur.com/FyV3d.gif" width="100%" onclick="currentSlide(2)" alt="text"> </div> </div> </div>

希望它有任何意義。