Div с фоновым изображением не отображается

Question

Я уверен, что здесь не хватает чего-то простого: я создаю карту с различными наложениями изображений. Я заставил карту работать, но карта не появляется, пока вы не нажмете кнопку. Мне нужно, чтобы он появлялся всегда. В настоящее время карта установлена в качестве фонового изображения. Если я установлю это как изображение, ни одна из кнопок не будет работать. Кто-нибудь знает, что мне не хватает?

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>

javascript html css

1

Angela R. 31 Май 2019 в 01:55

Answer 1

Поскольку все внутренние div являются скрытыми (то есть без содержимого), родительский (внешний) div не имеет начальной высоты.

Добавьте размер в раздел, и вы увидите изображение BG

Т.е.

.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");
}

(конечно, вам нужно будет отрегулировать значения, указанные выше, в соответствии с вашими потребностями)

См. демонстрацию ниже

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>

3

blurfus 30 Май 2019 в 23:15

Answer 2

В самом верху ваших стилей CSS, где у вас есть:

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

Убрать дисплей: нет; так что вы остались с:

.hide {
  z-index: 2;
}

1

Rounin 30 Май 2019 в 23:10

Div с фоновым изображением не отображается

2 ответа

Похожие вопросы

Новые вопросы

javascript