圆形图像链接问题

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;
}

此处演示：Fiddle