iframe占位符图像

iframe Placeholder Image

本文关键字：图像 占位符 iframe      更新时间：2023-11-01

我正在尝试制作一个iframe，它将显示静态图像，然后在用户单击占位符图像时在iframe中加载网页。这是一个虚拟之旅，因此图像将显示说明，然后在单击时查看虚拟之旅（链接）。我知道如何使用按钮更改iframe链接，但对于这个特定的应用程序，首选可点击的图像。我没有经验，所以非常感谢你的帮助！

只需将iframe放在div中，并将背景放在div上，然后使iframe透明，但不透明其内容。

<!doctype html>
<html>
  <head>
    <style type="text/css">
      .iframeframe { background-image: url("whatever.lol"); margin: 0; padding: 0; display: inline-block; }
      iframe       { width: 600px; height: 400px; }
    </style>
  </head>
  <body>
    <div class="iframeframe">
      <iframe src="whatever.lol"></iframe>
    </div>
  </body>
</html>
相关文章：