html - 在背景图像上放置不可见链接
问题描述
我有一个背景图像加载到 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> </p>
<p style="font-size: 9px; line-height: 11px; padding-top: 23px;"><strong>Contest Rules:</strong> 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>
解决方案
在图像上添加一个绝对定位的链接。
在此示例中,我已将其设置为与图像中的红色圆圈相同的大小和形状,但您可以根据需要调整大小和重新定位它。评论中的附加信息。
#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> </p>
<p id="rules"><strong>Contest Rules:</strong> 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>
推荐阅读
- vbscript - 使用带有 SSL 加密的 Vbscript(UFT) 的 Azure 云数据库的连接字符串
- mongodb - 无法从本地机器连接到 docker 容器中的 mongodb
- scripting - 如何轻松地将 Debian 脚本转换为 RPM 脚本?
- c++ - 为什么通用参考不保持其论点的恒定性?
- javascript - 使用 GET 方法的 ExpressJS PATCH 请求重定向
- google-cloud-platform - 在 Google Compute Engine VM 实例中使用自定义 .sh 文件安装 Odoo
- html - 有很多嵌套元素不好吗?
- python - 在 Python 中使用组合而不是继承来实现多态性的正确方法
- java - 从实用程序类(非活动)访问房间数据库的 NullPointerException
- c++ - 当我将 cin 用于两个输入时,如何接收一个输入?