如何将PNG图像制作成圆形按钮？

Question

如何将PNG图像制作成圆形按钮？

htmlcss

3

我正在建设一个包含大量图片的网站。概念是星系，所以你可以想象我有很多圆形行星，我想把它们变成可点击的按钮。

这些行星是PNG格式的，具有透明背景，我希望可点击区域仅为非透明区域（即圆形形状）。然而，我没有找到可能解决此问题的方法。

我还尝试在图像上放置一个透明圆圈，并在透明圆圈上放置<a href>，而不是在图像上放置它，但这似乎也行不通。

更糟糕的是，我有重叠的图像，这可能导致一些我找到的解决方案无法使用。例如，我有两个或三个重叠的图像，我希望它们都是按钮（链接到不同的页面）（并且我有另一张图像作为它的背景），所以我不知道如果我在这些按钮的交汇处单击会发生什么。

我尝试过的一些解决方案是：

http://jsfiddle.net/josedvq/Jyjjx/45/

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

http://jsfiddle.net/DsW9h/

http://bryanhadaway.com/how-to-create-circles-with-css/

我的代码片段：

HTML

<div>
<a href="~/SomePage">
    <img draggable="false" class="AIcon" src="~/Content/Aicon.png" id="AI">
</a>
</div>

CSS

.AIcon{
position:absolute; left: 50%; top: 40%; width: 2.5%; height:5%; opacity: 1;
-webkit-animation: AAAIcon .5s linear 0s 1 normal forwards running;
}

@-webkit-keyframes AAAIcon {
0%  {left: 50%; top: 40%; width: 2.5%; height:5%; opacity: 0; z-index:4;}
100%  {left: 78%; top: 20%; width: 32%; height:32%; opacity: 1; z-index:4;} 
}

现在，图像在整个方框内都是可点击的，包括透明区域，但并非所有区域都是可点击的（图像中有一些补丁是不可点击的）。

这让我很疯狂。任何指针都将非常有帮助。

- dessskris

你愿意学习SVG吗？ - Mike Robinson

@MikeRobinson 嗯，问题是所有的图形都已经由团队中的另一个成员在几个月前完成制作了，让他们重新用SVG制作一遍并不好（除非这实际上非常简单而我误解了）。但这会有效地解决问题吗？ - dessskris

你说过你尝试过制作一个不可见的第二个圆圈，为什么没有成功？ - Emmet Arries

@JeffArries 只有圆的某些部分是可点击的，由于存在未被点击的区域，我怀疑这是由于图像重叠造成的，但请纠正我如果我错了。 - dessskris

我不知道你是否已经尝试过这个，但是@freestock.tk的答案应该适用于你！ - Emmet Arries

3个回答

1

我不确定我是否正确理解了你的问题，但是请查看z-index。如果有元素重叠在一起，这就是它们无法被点击的原因。

- Matt

当我试图制作一个透明的圆形放在图片上方时，我已经使用了z-index将其放置在最顶层，但是圆内仍然存在无法点击的区域。 :( - dessskris

0

所以，您可以将行星或圆形包装在 <a> 标签中，将 <a> 元素的 border-radius 设置为 100%，使其成为一个完整的圆形，然后隐藏溢出部分。

请参见：https://jsfiddle.net/xcqy7r14/2/

标记：

<a href="#">
  <canvas></canvas>
</a>
<br><br>
<a href="#">
  <canvas></canvas>
</a>

CSS：

a {
  border-radius: 100%;
  overflow: hidden;
  display: inline-block;
}
canvas {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: #f00;
  border-radius: 100%;
}

- Matt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- L777 · Accepted Answer

你有三种方法可以实现：

1- 在下面的代码片段中，我在第一颗月球上使用了一个带有css圆形的图像div。

2- 或者，在第二个月球上通过将圆形放置在“div:after”上得到了相同的结果。

3- 第三种方法是第二种方法的相反：创建一个透明的圆形，让月亮图片位于“:after”上。

第一种和第三种方法允许你将月球作为链接，并使用“onclick”javascript鼠标事件。红色元素设置为“pointer-events: none;”，因此不会影响月球的悬停效果。

body {
margin:0px;
background: black;
overflow: hidden;
}

#circle1 {  
  width: 200px;
  height: 200px;
  background: purple;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  cursor: pointer;
  opacity: 0.2;
}

#image1 {
  display: inline-block;
  width: 200px;
  height: 200px;
  position: relative;
  background: url('http://i.imgur.com/YAWvTuu.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#image2 {
  display: inline-block;
  width: 200px;
  height: 200px;
  position: relative;
  background: url('http://i.imgur.com/YAWvTuu.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#image2:after {
  content:"";
  display: inline-block;
  width: 200px;
  height: 200px;
  background: orange;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  cursor: pointer;
  opacity: 0.2;
}

#inactive {
  background: tomato;
  position:absolute;
  top:50px;
  left: 50px;
  height:50px;
  width: 400px;
  pointer-events: none;
  opacity: 0.9;
}

#third {
  position:absolute;
  display: inline-block;
  width: 200px;
  height: 200px;
  background: transparent;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  cursor: pointer;
}

#third::after {
content: url('http://i.imgur.com/YAWvTuu.png');
cursor: auto;
pointer-events: none;
}

<div id="image1" alt=image><div id="circle1" onClick="window.location.href = 'http://www.google.com'"></div></div>
<div id="image2" alt=image></div><div id=third class="circle" alt=image onClick="window.location.href = 'http://www.google.com'"></div>
<div id=inactive></div>