圆形图像链接问题 [英] rounded image link issue

问题描述

我使用以下图片作为链接的背景图片.

I have used the following image as background image for link.

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

If I hover over the image the link display in the edges also. I just want to show the link for exact round image and not for the blank edges. Is there any possibility to do this in 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>

推荐答案

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

If you get your image to be square and perfectly centered, you can just use the border-radius property, which will affect the effective clickable area as well.

a{
    ...
    display: block;

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

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

这篇关于圆形图像链接问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！