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

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;
}

任何建议将不胜感激。

使用bootstrap 3进行FYI IM。

Answer 1

这样的事情？

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

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

 }

这是你在看什么？