iframe 占位符图片

【问题标题】：iframe Placeholder Imageiframe 占位符图片
【发布时间】：2016-04-02 08:18:58
【问题描述】：

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

【问题讨论】：

标签： javascript css iframe

【解决方案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>

【讨论】：