轮廓按钮到图像轮廓

Posted 2023-03-06

【中文标题】轮廓按钮到图像轮廓

【英文标题】：Contour button to outline of image

【发布时间】：2021-01-05 12:56:46

【问题描述】：

请注意：我已经尝试了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" ></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; 

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

谢谢。

【参考方案1】：

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

【讨论】：

嗨@Kevin tierney。它更像是创建了一个比图像本身大得多的盒子。图像本身是按钮，但形状不规则（根据 OP 中链接的图像）。因此，当多个图像非常接近时，单击可能会选择错误的按钮。 btn-transparent-outline-btn 能解决这个问题吗？