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 {
  width: 670px;
  height: 700px;  
}

#footerWrap {
  background-image: url(https://www.quanser.com/wp-content/uploads/2019/03/QBOT2e-Banner2.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 bottom;  
  position: relative;
  height: 215px;
  width: 100%;
}

#transparentLink {
  opacity: 0;
  position: absolute;
  bottom: 15px;
  right: 13px;
  height: 20px;
  width: 254px;
}

<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>
  <div id="footerWrap">
    <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>
    <a href="#" id="transparentLink"></a>
  </div>
</div>

Answer 2

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

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

#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>

在背景图像上放置一个不可见的链接

2 个答案: