Как убрать белый фон под иконкой?

206

20 апреля 2018, 12:11

Как убрать белую строку там где иконки увеличить, уменьшить и один к одному?
И почему он там появляется?
Т.е. под иконкой откуда-то берется белый фон по всей ширине блока, но он не нужен.
Иконки должны быть прямо на фотографии

.acatpicdiv {border:1px solid #000; width:100%; height:300px; overflow:hidden; } 
.acatpicinnerdiv {position:relative; } 
.acatpic {cursor:move;} 
 
.acatpiclablediv {position:absolute; border:1px solid #000; font-weight:bold; text-align:center; cursor:pointer;background-color: white;} 
 
.selected-tr td {background: #dedfe0;} 
 
.zoom-in {cursor: pointer;} 
.zoom-out {cursor: pointer;} 
.zoom-out {cursor: pointer;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.2/jquery.panzoom.min.js"></script> 
<section> 
  <div class="acatpicdiv"> 
    <img class="zoom-in" src="https://png.icons8.com/dusk/24/000000/zoom-in.png" title="Увеличить масштаб" width="24"> 
    <img class="zoom-out" src="https://png.icons8.com/dusk/24/000000/zoom-out.png" title="Уменьшить масштаб" width="24"> 
    <img class="zoom-out" src="https://png.icons8.com/dusk/24/000000/zoom-to-actual-size.png" title="сбросить" width="24"> 
 
    <div class="parent" > 
      <div class="panzoom acatpicinnerdiv ui-widget-content" id="draggable"> 
        <img src="https://otvet.imgsmail.ru/download/4e0ce039dd5c81fb86558fdb3df75d9c_h-2.jpg" > 
 
      </div> 
    </div> 
  </div> 
  <script> 
    (function() { 
      var $section = $('section').first(); 
      $section.find('.panzoom').panzoom({ 
        $zoomIn: $section.find(".zoom-in"), 
        $zoomOut: $section.find(".zoom-out"), 
        $zoomRange: $section.find(".zoom-range"), 
        $reset: $section.find(".reset") 
      }); 
    })(); 
  </script> 
</section>

Answer 1

Обернул кнопки в div с классом button-wrapper с абсолютным позиционированием, и перенес кнопки ниже, чем картинка, чтобы отображалось сверху.

.acatpicdiv { 
  border: 1px solid #000; 
  width: 100%; 
  height: 300px; 
  overflow: hidden; 
} 
 
.acatpicinnerdiv { 
  position: relative; 
} 
 
.acatpic { 
  cursor: move; 
} 
 
.acatpiclablediv { 
  position: absolute; 
  border: 1px solid #000; 
  font-weight: bold; 
  text-align: center; 
  cursor: pointer; 
  background-color: white; 
} 
 
.selected-tr td { 
  background: #dedfe0; 
} 
 
.zoom-in { 
  cursor: pointer; 
} 
 
.zoom-out { 
  cursor: pointer; 
} 
 
.zoom-out { 
  cursor: pointer; 
} 
 
.button-wrapper { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.2/jquery.panzoom.min.js"></script> 
<section> 
  <div class="acatpicdiv"> 
    <div class="parent"> 
      <div class="panzoom acatpicinnerdiv ui-widget-content" id="draggable"> 
        <img src="https://otvet.imgsmail.ru/download/4e0ce039dd5c81fb86558fdb3df75d9c_h-2.jpg"> 
 
      </div> 
    </div> 
    <div class="button-wrapper"> 
      <img class="zoom-in" src="https://png.icons8.com/dusk/24/000000/zoom-in.png" title="Увеличить масштаб" width="24"> 
      <img class="zoom-out" src="https://png.icons8.com/dusk/24/000000/zoom-out.png" title="Уменьшить масштаб" width="24"> 
      <img class="zoom-out" src="https://png.icons8.com/dusk/24/000000/zoom-to-actual-size.png" title="сбросить" width="24"> 
    </div> 
  </div> 
  <script> 
    (function() { 
      var $section = $('section').first(); 
      $section.find('.panzoom').panzoom({ 
        $zoomIn: $section.find(".zoom-in"), 
        $zoomOut: $section.find(".zoom-out"), 
        $zoomRange: $section.find(".zoom-range"), 
        $reset: $section.find(".reset") 
      }); 
    })(); 
  </script> 
</section>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Теряются абзацы в String HTML

Я в строку записываю несколько значений с абзацами, а в HTML строка выводится без абзацевПодскажите пожалуйста, можно как-то исправить?

171

HTML

Разные действия для кнопок формы Spring MVC

Есть две кнопки в двух формах, у каждой формы свое действиеЕсли я хочу поместить radiobutton, мне нужно это делать в двух формах что бы он применялся...

171

Java