等高线按钮以显示图像轮廓

如何解决等高线按钮以显示图像轮廓

请注意：我已经尝试了here列出的解决方案，因为它仍然会在图像周围绘制一个框，因此无法满足我的目的

更新：我对此进行了进一步研究，发现一种解决方案是绘制有问题的图像的SVG，并将其设置为按钮，以使图像周围没有太大的框。我不想这样做，因为我拥有很多资产，但这是唯一的解决方案吗？

我试图在我的网站上放置一个按钮，但要使其使其可单击区域完全是图像，而没有其他内容。我一直在尝试为此找到解决方案，但也许我没有搜索正确的术语。

目前，我正在使用Bootstrap为轮播创建按钮。这项工作正常，但是我遇到的问题是square border around the button itself，因为我在页面上放置了更多并排放置的按钮，所以会引起问题。

我希望可点击区域仅限于png本身，其中包括在上面链接的图片中看到的白色边框。

我目前的代码如下。

HTML：

    <div class='background'></div>
      <div class="map">
        <img id='mainMap' src='assets/maps/map.png' alt='map'>
        <!-- Modal's toggle button has data that's used to determine what content to use -->

        <!-- Bridge icons -->
        <button type="button" class="btn btn-primary-outline-btn bridge-btn" id='bridge1' data-toggle="modal" data-target="#exampleModal"><img class="bridge_icon" src="assets/icons/bridge1.png" alt="image"></button>
      </div>

CSS：

.camera_icon,.video_icon{
  width: 30px;
  height: 30px;
}

.bridge_icon {
  width: 150px;
  height: auto;
  margin: 0px;
  padding: 0px;
}

#bridge1 {
  top: 3%;
  left: 10%;
  position: inherit;
}

/* Buttons */

.btn,.btn-outline-primary,.video-btn {
  background-color: transparent;
  border-color: #ccc;
  padding: 0px;
  Box-shadow: none;
}

.btn:focus,.btn:active {
   outline: none !important;
   Box-shadow: none;
}

.bridge-btn {
  border-color: hotpink;
}

.btn-outline-primary:hover,.video-btn:hover{
  background-color: #e4dbef;
  border-color: #ccc;
}

.btn-outline-primary:focus,.video-btn:focus{
  background-color: #e4dbef;
  outline: none;
  border-color: #ccc;
}

.btn:focus,.btn:active:focus,.btn.active:focus { outline: none; ! important; outline-style: none; }

您能提供的任何帮助都会非常有用。

谢谢。

解决方法

如果我正确理解按钮的边框是不需要的？如果是这种情况，请尝试将btn-primary-outline-btn更改为btn-transparent-outline-btn