图片库，显示带有背景图片的图片

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>

希望它有任何意义。