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

Question

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

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

<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 的 IM。

Answer 1

是这样的吗？

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

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

 }

这就是你正在看的？