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

あなたは純粋な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;
}

ここにデモ：フィドル

Answer 2

ねえ、あなたはこのように見えますか:-

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 3

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 4

画像が正方形で完全に中央に配置されている場合は、border-radiusプロパティを使用するだけで、有効なクリック可能領域にも影響します.

a{
    ...
    display: block;

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

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