[英]How to make the visible part of png image with transparent background as a link?
我想使用帶有透明背景的.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%確定我的照片有透明的背景。*
當光標僅在笑臉(可見部分)上時,如何將圖像用作鏈接?
對於此特定圖像,您可以使用帶有圓圈的圖像映射作為活動區域。
<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"/>
使用css-attribute border-radius: 50%;
彎曲邊(如果圖像是圓形的)
嘗試這樣,映射技術
<map name="imgmap">
<area shape="smiley" coords="x,y,radius" href="link.html" alt="img_alt">
</map>
你也可以使用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>
您不必使用圖像映射。 我用2 <div>
s嘗試了它並且它起作用了。 只是把笑臉和一個<div>
與屬性onclick="window.open('yoururl')"
在主<div>
讓<div>
圓形並且不可見。
HTML:
<div id="maindiv">
<img src="smiley.png" alt="" id="smiley"/>
<div id="LinkArea" onclick="window.open('https://google.com')"></div>
</div>
CSS:
#maindiv {
height: 150px;
width: 150px;
background-color: rgba(0,0,0,0);
border-radius: 100%;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
#smiley {
height: 150px;
width: 150px;
z-index: 1;
}
#LinkArea {
height: 150px;
width: 150px;
background-color: rgba(0,0,0,0);
border-radius: 100%;
cursor: pointer;
z-index: 3;
position: absolute;
top: 0;
left: 0;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.