div的背景图片未显示

Question

I am sure I am missing something simple here: I am creating a map with different image overlays. 我确信这里缺少一些简单的东西：我正在创建一个具有不同图像叠加层的地图。 I got the map to work but the map doesn't show up until you push a button. 我可以使用该地图，但是只有按一下按钮才能显示该地图。 I need it to show up always. 我需要它经常出现。 Currently the map is set as a background image. 当前，地图被设置为背景图像。 If I set it as an image none of the buttons work. 如果将其设置为图像，则所有按钮均无效。 Does anyone know what I'm missing? 有人知道我在想什么吗？

 var alertName = document.getElementsByClassName("alertName"); var myFunction = function() { var hide = document.getElementsByClassName("hide"); for (var i = 0; i < hide.length; i++) { hide[i].style.display = "none"; } var name = this.getAttribute("name"); var show = document.querySelector('.' + name); if (show.style.display = "none") { show.style.display = "block"; } else { show.style.display = "none"; } }; for (var i = 0; i < alertName.length; i++) { alertName[i].addEventListener('click', myFunction); }

 .hide { z-index: 2; display: none; } .hidingsection { background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077777/elke/map_base_1_gv6ehh.png"); background-repeat: no-repeat; } .container { display: flex; flex-flow: row } .hidingsection { z-index: 0; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="map"> <section class="hidingsection"> <div class="hide schoolContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/schools_pyqexw.png" /> </div> <div class="hide recreationContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077189/elke/recreation_psbfyp.png" /> </div> <div class="hide restaurantsContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/restaurants_xjbtbd.png" /> </div> <div class="hide banksContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/banks_zohw39.png" /> </div> <div class="hide groceriesContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/groceries_xjaddd.png" /> </div> <div class="hide transportationContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/transportation_mzzclu.png" /> </div> <div class="hide libraryContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/library_pbesf1.png" /> </div> </section> </div> <div class="buttons"> <section> <div> <button class="alertName" name="schoolContent">Schools</button> <button class="alertName" name="recreationContent">Recreation</button> <button class="alertName" name="restaurantsContent">Restaurants</button> <button class="alertName" name="banksContent">Banks</button> <button class="alertName" name="groceriesContent">Groceries</button> <button class="alertName" name="transportationContent"> Transportation</button> <button class="alertName" name="libraryContent">Library</button> </div> </section> </div> </body> </html>

Answer 1

Since all inner div s are hidden (thus no-content), the parent (outer) div does not have an initial height. 由于所有内部div都是隐藏的（因此没有内容），因此父（外部） div没有初始高度。

Add a size to the section and you'll see the bg image 在该部分添加尺寸，您将看到bg图片

ie 即

.hidingsection {
    z-index: 0;
    width: 1280px;
    height: 800px;
    background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077777/elke/map_base_1_gv6ehh.png");
}

(of course, you'll need to adjust the values given above to suit your needs) （当然，您需要调整以上给出的值以适合您的需求）

See demo below 请参阅下面的演示

 var alertName = document.getElementsByClassName("alertName"); var myFunction = function() { var hide = document.getElementsByClassName("hide"); for (var i = 0; i < hide.length; i++) { hide[i].style.display = "none"; } var name = this.getAttribute("name"); var show = document.querySelector('.' + name); if (show.style.display = "none") { show.style.display = "block"; } else { show.style.display = "none"; } }; for (var i = 0; i < alertName.length; i++) { alertName[i].addEventListener('click', myFunction); }

 .hide { z-index: 2; display: none; } .hidingsection { z-index: 0; width: 1280px; height: 800px; background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077777/elke/map_base_1_gv6ehh.png"); } .container { display: flex; flex-flow: row } .hidingsection { }

 <div class="container"> <div class="buttons"> <section> <div> <button class="alertName" name="schoolContent">Schools</button> <button class="alertName" name="recreationContent">Recreation</button> <button class="alertName" name="restaurantsContent">Restaurants</button> <button class="alertName" name="banksContent">Banks</button> <button class="alertName" name="groceriesContent">Groceries</button> <button class="alertName" name="transportationContent"> Transportation</button> <button class="alertName" name="libraryContent">Library</button> </div> </section> </div> <br/> <div class="map"> <section class="hidingsection"> <div class="hide schoolContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/schools_pyqexw.png" /> </div> <div class="hide recreationContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077189/elke/recreation_psbfyp.png" /> </div> <div class="hide restaurantsContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/restaurants_xjbtbd.png" /> </div> <div class="hide banksContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/banks_zohw39.png" /> </div> <div class="hide groceriesContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/groceries_xjaddd.png" /> </div> <div class="hide transportationContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/transportation_mzzclu.png" /> </div> <div class="hide libraryContent"> <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/library_pbesf1.png" /> </div> </section> </div>

Answer 2

At the very top of your CSS Styles, where you have: 在CSS样式的最顶部，您具有：

.hide {
  z-index: 2;
  display: none;
}

remove the display: none; 删除显示：无； so you are left with: 所以你剩下：

.hide {
  z-index: 2;
}

div的背景图片未显示

问题描述

2 个解决方案

解决方案1
3 已采纳 2019-05-30 23:07:31

解决方案2
1 2019-05-30 23:10:25

div的背景图片未显示

问题描述

2 个解决方案

解决方案1 3 已采纳 2019-05-30 23:07:31

解决方案2 1 2019-05-30 23:10:25

解决方案1
3 已采纳 2019-05-30 23:07:31

解决方案2
1 2019-05-30 23:10:25