Html 将图像锚定可点击区域设置为圆形 如果你有能力帮助我，你有你需要帮助的知识，那么请考虑一下：

我的网站有一个圆形徽标，是否可以将锚定标签的可点击区域做成一个圆形以匹配图像

以下是相关代码：

HTML:

我把悬停区域变成黑色，这样你就能明白我的意思了

这对CSS和HTML来说是非常新的，所以请只键入对初学者友好的建议

---

非常感谢所有知道您将为我提供巨大帮助的善良和知识渊博的会员。

您可以使用图像地图来完成此任务。请注意，黑色仅在您将鼠标悬停在徽标外时显示，而光标在您将鼠标悬停在徽标上时切换为指针：

<div class="container clearfix">
    <div class="hheader">
        <img id="logo" src="http://i.imgur.com/sfKCJEY.png" alt="Density Art Logo" usemap="#logomap">
        <map name="logomap">
            <area shape="circle" coords="130,125,110" alt="Return to home" href="#">
        </map>
        <img id="motto" src="http://i.imgur.com/qN6f4fZ.png" alt="We make websites, art and more">
    </div>
</div>

您可以在jsfiddler中从CSSAB中完全删除
#徽标：hover
？是的，我知道。我建议您删除
#logo:hover
上的css效果。这样它就不会显示黑色背景。无论您是否想要实现，请检查此链接我包括了悬停以显示href区域。如果省略该选项，则很明显，但是当鼠标悬停在徽标上时，显示为黑色的整个区域是一个透明区域，您可以在其中单击href。或者，我希望唯一的“可点击”区域是圆形徽标。抱歉，如果我没有解释清楚，我对这一切都很陌生。非常感谢您分享您的知识和经验。我无法在firefox Quantum中实现这一点，无论我在控制台节点列表中的map元素上放置了什么坐标，它始终位于屏幕中央，宽度为0，高度为17px，这很奇怪。即使添加了usemap属性，也无法使其与我的img匹配。。区域属性在控制台中也会变灰..检查Js FIDLE上的元素也会发现map元素的宽度为0px&17px，这很奇怪，因为在您的代码或我的代码中没有指定的位置，其他人是否可以添加另一个答案，进一步解释如何使用此选项或为什么会出现奇怪的情况……作为一个附带问题，psuedo css悬停状态是否应附加到实际图像、地图或区域？
#logo {
display:inline;
position: absolute;
margin: -30px 0px 0px 10px;
}

#logo:hover {
background: black;
}

#motto {
display:inline;
float: right;
margin-top: -20px;

}

.hheader {
background-color: #005073;
background-image: url(images/header.png), -webkit-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Safari 5.1 to 6.0 */
background-image: url(images/header.png), -o-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Opera 11.1 to 12.0 */
background-image: url(images/header.png), -moz-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Firefox 3.6 to 15 */
background-image: urk(images/header.png), linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* Standard syntax */
box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4);
border-style: solid;
border-width: 1px;
border-color: black;
margin-bottom: 25px;
margin-top: 15px;
height: 195px;
}

.container {
width: 960px;
padding: 0 10px;
margin: 0 auto;
}

<div class="container clearfix">
    <div class="hheader">
        <img id="logo" src="http://i.imgur.com/sfKCJEY.png" alt="Density Art Logo" usemap="#logomap">
        <map name="logomap">
            <area shape="circle" coords="130,125,110" alt="Return to home" href="#">
        </map>
        <img id="motto" src="http://i.imgur.com/qN6f4fZ.png" alt="We make websites, art and more">
    </div>
</div>