css - 只使图像的一部分可点击和可见？

Question

我在网页上放置了一个三角旗，我只希望三角旗的形状是可点击的。这让我很头疼，因为图像的完整尺寸是 320x182。我不希望整个矩形是可点击的。

我的第二个问题是只有三角旗出现在页面上。现在，它看起来像一个白色的矩形，里面有一个蓝色的三角旗。

<a href="http://www.cdm.depaul.edu/Pages/default.aspx"><img alt="depaul" class="transparent" src="/_images/depaul_pennant.jpg" width="" /></a>


.transparent {
background: transparent;
background-color: transparent;
}

任何建议将不胜感激。

仅供参考 IM 使用引导程序 3。

Answer 1

像这样的东西？

http://jsfiddle.net/cancerian73/jzPqs/2/

.box1 {
width:398px;
height:287px;

 }

这是你在看什么？