如何从PNG图像中制作圆形按钮?

时间:2016-03-02 23:31:52

标签: html css

我正在建立一个包含大量图片的网站。这个概念是一个星系,所以你可以想象我有许多圆形行星,我想让它们成为可点击的按钮。

这些行星是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;} 
}

现在,图像可以在图像的整个正方形内点击,包括透明区域,但并非所有区域都是可点击的(图像中有一些区域,它们只是不可点击)

这让我疯了。任何指针都会非常有用。

3 个答案:

答案 0 :(得分:3)

您有三种方法可以做到:

1 - 在下面的代码片段中,我在第一个月亮的图像div中使用了一个CSS圈。

2 - 或者,在第二个月亮上获得相同的结果,将圆圈放在div:after上。

3 - 第三种方法与第二种方法完全相反:创建一个透明圆圈,让月亮图像在:after上。

第一种和第三种方法允许您将月亮用作onclick javascript鼠标事件的链接。红色元素设置为pointer-events: none;,因此它对月亮没有任何影响。徘徊。

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

我不确定我是否正确解释了您的问题,但请查看z-index。如果相互重叠的元素,这将是他们无法点击的原因。

答案 2 :(得分:0)

因此,您可以将行星或圆包裹在<a>标记中,使<a>元素的边界半径为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%;
}