html - 在背景图像上放置不可见链接

Question

我将背景图片加载到 wordpress 的列中。在这张图片上我想插入一个透明框使图片可以点击(因为无法链接背景图片)

#container {
  background-image: url(https://www.quanser.com/wp-content/uploads/2019/03/QBOT2e-Banner2.png);
  width: 670px;
  height: 700px;
  background-repeat: no-repeat;
  background-position: 0px 240px;
}

<div id="container">
  <h6><strong><br>
    Do you want to move your research to the next level, beyond simulation? Are you looking for a way to speed up and advance your work?</strong></h6>
  <p>For 30 years, Quanser platforms help researchers worldwide develop an effective research regimen that connects advanced theoretical and algorithm framework and real-world implementation.<br> Combining control plants with dynamics sufficient for physically
    relevant testing, and a real-time computational and modeling framework, our systems represent ideal testbeds for rapid testing of algorithms and research theories. Over 3,000 research publications are a solid testament!<br> Our continuing innovations
    ensure we can offer you the right tools, whether your interest lies in classic control, distributed control, autonomous<br> robotics, cyber-physical systems, and other emerging<br> control areas.<br>
    <strong><br>
    Win one of our research platforms – get an<br>
    autonomous ground robot for your lab</strong></p>
  <p>&nbsp;</p>
  <p style="font-size: 9px; line-height: 11px; padding-top: 23px;"><strong>Contest Rules:</strong>&nbsp;To enter a draw for a complete QBot 2e system (includes the ground robot vehicle, one QUARC software Autonomous license, and a wireless router), fill the form on this page before September 31, 2019. The draw will
    be held on October 4, 2019, and the results will be announced by email.</p>
</div>

Answer 1

在图像上添加一个绝对定位的链接。

在此示例中，我将其设置为与您图像中的红色圆圈相同的大小和形状，但您可以根据需要调整大小和位置。评论中的其他信息。

#container {
  background-image: url(https://www.quanser.com/wp-content/uploads/2019/03/QBOT2e-Banner2.png);
  /* removed height and width so it will wrap and fit neatly in smaller viewports */
  min-width: 370px;  /* set minimum width so its always at least as wide as the red circle part of the graphic */
  max-width: 670px;  /* set max width so its never wider than the graphic*/
  padding-bottom: 105px;  /* added padding so now things should fit & line-up regardless of the font-size or width. (Try resizing viewport) */
  background-repeat: no-repeat;
  background-position: right bottom;  /* positioned bg at bottom right */
  position: relative;  /* set position relative so the absolutely positioned #hotspot stays aligned */
  overflow: hidden;  /* hidden any overflow in order to crop the hotspot */
}
#rules {
 font-size: 9px; 
 line-height: 11px; 
 width:calc(100% - 300px);
 }
#hotspot {
  display: block;
  position: absolute;
  right: -59px;
  bottom: -144px;
  border-radius: 50%;
  height: 360px;
  width: 360px;
}
#hotspot:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* added a little responsive styles for on narrow devices */
@media (max-width:450px) {
  #container {
    padding-bottom: 210px;
  }
  #rules {
   width:100%;
  }
}

<div id="container">
  <h6><strong><br>
    Do you want to move your research to the next level, beyond simulation? Are you looking for a way to speed up and advance your work?</strong></h6>
  <p>For 30 years, Quanser platforms help researchers worldwide develop an effective research regimen that connects advanced theoretical and algorithm framework and real-world implementation.<br> Combining control plants with dynamics sufficient for physically
    relevant testing, and a real-time computational and modeling framework, our systems represent ideal testbeds for rapid testing of algorithms and research theories. Over 3,000 research publications are a solid testament!<br> Our continuing innovations
    ensure we can offer you the right tools, whether your interest lies in classic control, distributed control, autonomous<br> robotics, cyber-physical systems, and other emerging<br> control areas.<br>
    <strong><br>
    Win one of our research platforms – get an<br>
    autonomous ground robot for your lab</strong></p>
  <p>&nbsp;</p>
  <p id="rules"><strong>Contest Rules:</strong>&nbsp;To enter a draw for a complete QBot 2e system (includes the ground robot vehicle, one QUARC software Autonomous license, and a wireless router), fill the form on this page before September 31, 2019. The draw will
    be held on October 4, 2019, and the results will be announced by email.</p>
  <a id="hotspot" href="#somelink" title="Learn more about QBot 2e"></a>
</div>