html - 圆形图像链接问题

Question

我已使用以下图像作为链接的背景图像。

如果我将鼠标悬停在图像上，链接也会显示在边缘。我只想显示精确圆形图像的链接，而不是空白边缘的链接。有没有可能在css中做到这一点？

css:

.buy_purple a{ background-image:url(../imagesf/buy_purple.png); width:81px; height:57px; background-repeat:no-repeat; float:right; font-size:20px; font-weight:bold; text-shadow: 1px 1px 2px #c9a3c2; text-align:center; padding-top:29px; color:#000;}

Html: 

<div class="buy_purple"><a href="#">BUY</a></div>

Answer 1

如果你让你的图像是方形的并且完全居中，你可以只使用该border-radius属性，这也会影响有效的可点击区域。

a{
    ...
    display: block;

    border-radius: 40px; /* if the height+width are 80px */
}

示例：http: //jsfiddle.net/tvJMG/

Answer 2

我认为你应该使用map标签

 <img src="test.png" alt="test" usemap="links"/>
 <map name="links">
    <area shape="circle" coords="your image co-ords(centerX,centerY,Radius)" href="your link" />
 </map>

Answer 3

嘿，你看起来像这样吗：-

http://tinkerbin.com/yY4FzaZr

HTML

<div class="buy_purple"><a href="#">BUY</a></div>

CSS

.buy_purple a{ background-image:url(http://i.stack.imgur.com/wC3xc.png); width:81px; height:57px; background-repeat:no-repeat; float:right; font-size:20px; font-weight:bold; text-shadow: 1px 1px 2px #c9a3c2; text-align:center; padding-top:29px; color:#000;}
.buy_purple a:hover {
  background:url(http://i.stack.imgur.com/C4Jia.jpg) no-repeat 1px -5px;
}

或者你正在寻找纯 CSS

Answer 4

你可以使用纯 CSS 来做到这一点

这里的html

<div>
<a href="/"><img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Small-city-symbol.svg"></a>
</div>

这里的CSS

img {
border: 1px solid red;
border-radius: 169px 169px 169px 169px;
width: 200px;
height: 200px;
}
a {
height: 0px;
}

这里的演示：小提琴