3

Web サイトのリンクとして、背景が透明な .png 画像を使用したいと考えていました。

私はこのhtmlで試しました：

<a href="index.html">
    <img border="0" src="smiley.png" alt="smiley" width="150" height="150">
</a>

そしてこのcss：

a
{
    text-decoration: none;
    color: inherit;
}

ただし、画像の透明な背景で画像をクリックすることはできます。

これが私が取得しようとしているものの図です:

サンプル

***注: この写真は説明のみを目的としています。写真の背景が透明であることは 100% 確信しています。*

カーソルがスマイリー フェイスのみ (目に見える部分) にあるときはいつでも、画像をリンクとして使用するにはどうすればよいですか?

4

5 に答える 5

4

この特定の画像の場合、アクティブ エリアとして円を含む画像マップを使用できます。

<map id="ImgMap0" name="ImgMap0">
    <area alt="" coords="30, 32, 30" href="http://www.link.com" shape="circle" />
</map>
<img src="http://placehold.it/64x64" alt="" usemap="#ImgMap0"/>
于 2013-03-22T20:43:45.027 に答える
2

css-attributeborder-radius: 50%;を使用して側面を湾曲させます (画像が円形の場合)

于 2013-03-22T21:03:28.990 に答える
1

css3 を使用することもできます。詳細と良い例が記載されたこの記事を見つけました

私はこれを「ほとんど」テストしませんでしたが、試してみることはできます。

CSS

.circle {
    background: none repeat scroll 0 0 #CCCCCC;
    /* some cross-browser css missing for border-radius */
    border-radius: 100px 100px 100px 100px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 20px;
    height: 200px;
    line-height: 200px;
    margin-right: 30px;
    text-align: center;
    width: 200px;
}
.circle-border {
    background: none repeat scroll 0 0 #CCCCCC;
    border: 1px solid #999999;
    /* some cross-browser css missing for border-radius */
    border-radius: 100px 100px 100px 100px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 20px;
    height: 199px;
    line-height: 200px;
    margin-right: 30px;
    text-align: center;
    width: 199px;
}

HTML

<a href="#" class="circle">BUTTON</a>
<hr style="clear:both;float:left;height:1px;width:100%;" />
<a href="#" class="circle-border">BUTTON</a>

ここでやり直し

于 2013-03-25T13:11:34.107 に答える
1

こうやってみる、マッピングテクニック

<map name="imgmap">
<area shape="smiley" coords="x,y,radius" href="link.html" alt="img_alt">
</map>
于 2013-03-22T20:49:32.913 に答える