您也可以使用svg代替图像映射。
.hover_group:hover { opacity: 1;}#projectsvg { position: relative; width: 100%; padding-bottom: 77%; vertical-align: middle; margin: 0; overflow: hidden;}#projectsvg svg { display: inline-block; position: absolute; top: 0; left: 0;}<figure id="projectsvg"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet" ><!-- set your background image --><image width="1920" height="1080" xlink:href="http://placehold.it/1920x1080" /><g opacity="0"> <a xlink:href="https://example.com/link1.html"> <text x="652" y="706.9" font-size="20">First zone</text> <rect x="572" y="324.1" opacity="0.2" fill="#FFFFFF" width="264.6" height="387.8"></rect> </a></g><g opacity="0"> <a xlink:href="https://example.com/link2.html"> <text x="1230.7" y="952" font-size="20">Second zone</text> <rect x="1081.7" y="507" opacity="0.2" fill="#FFFFFF" width="390.2" height="450"></rect> </a></g> </svg></figure>
