如何摆脱PNG隐形边框？

Question

我是网络编程的新手，最近我被要求为某人制作一些主页。 不幸的是我遇到了一些问题，主页将在触摸屏上进行触摸输入，我有大多数时候按钮的报告点击时不起作用，我的一个嫌疑人是由PNG引起的隐形边框。 TL; DR - http://puu.sh/6HQez.jpg红色按钮的一角被紫色按钮的隐形边框阻挡，有没有办法解决这个问题？

编辑：不，我不是要求如何删除虚线，我让它们显示给你。

Answer 1

看起来你所指的并不是一个“隐形边界”，而是一个“看不见的背景”。

即使某些部分是透明的，您的PNG文件在事件处理方面也是矩形的。

如果你需要禁用某些元素被点击，你可以采取几种方式：

1. 使用CSS禁用pointer-events以确保具体 元素不会限制点击。

   #mypurplediv {pointer-events: none;}

2. 使用Z-index来决定元素的层次结构：

   #mypurplediv {z-index: 0;}

   #myrediv {z-index: 1;}

修改 根据您的意见，您似乎需要保留点击所有元素的能力。 正如我上面提到的，你当前的PNG实际上是矩形，有些部分是透明的。 所以你有这些选择：

1）使用基于矢量的形状的SVG（默认情况下不具有不可见的背景）。 Good tutorial here

2）使用图片映射和area创建形状并为其href。 This is a good tutorial about image mapping

example - <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="index.htm">

3）使用第三方javascript / jQuery库，例如ImageMapster。

希望这有帮助！

Answer 2

虚线边框称为焦点轮廓。您可以通过将CSS应用于图像来关闭它。

img { outline: none; }