html - 轮廓按钮到图像轮廓
问题描述
请注意:我已经尝试过此处列出的解决方案,它不符合我的目的,因为它仍然在图像周围绘制了一个框
更新:我对此进行了进一步研究,发现一种解决方案是绘制相关图像的 SVG 并将其设为按钮,这样图像周围就不会出现这么大的框。我不想这样做,因为我有很多资产,但这是唯一的解决方案吗?
我正在尝试在我的网站上放置一个按钮,但要使可点击区域完全是图像而不是其他任何东西。我一直在尝试为此寻找解决方案,但也许我没有搜索正确的术语。
目前,我正在使用 Bootstrap 为轮播创建一个按钮。这很好用,但我遇到的问题是按钮本身周围的方形边框,这会导致问题,因为我在页面上放置了更多紧密放置在一起的按钮。
我希望将可点击区域严格限制为 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
推荐阅读
- php - Symfony - 字符串字段中的持久数组
- ios - 如何在 Swift 中解码 JSON 字典类型的属性?
- c++ - C ++中stoi(字符串到整数)函数的时间复杂度是多少?
- oauth-2.0 - JMeter、不记名令牌和网络驱动程序。“观众无效”
- python - 将函数应用于继承的抽象方法中的所有函数
- python - 如何创建手动执行线性回归的类
- flutter - 如何在横向模式下将颤动的 BottomNavigationBar 放置在左侧?
- r - 使用 dput 从 R 环境中将表格转换为 .md 格式
- git - 使用 Git 传达拉取请求的相关更改与向经理显示临时更改
- scala - Scala - 发现错误类型不匹配:需要 List[String]:scala.collection.IterableOnce[Nothing]