Question

我尝试制作一个显示静态图片的iframe，然后在用户点击占位符图片时在iframe中加载网页。它适用于虚拟游览，因此图像将显示指令，然后在单击时查看虚拟游览（链接）。我知道如何使用按钮更改iframe链接，但对于此特定应用程序，首选可点击图像。我相当缺乏经验，所以非常感谢任何帮助！

Answer 1

只需将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>

iframe占位符图片

1 个答案: