网页添加iframe后出现白色遮挡块，如何消除或设置背景透明？

嘿，我帮你搞定这个iframe滚动时的白色块问题！这个问题其实是因为iframe本身是一个独立的文档，它默认带有白色背景，当你滚动iframe内容时，内容移开后就露出了这个白色背景，而不是你父页面的背景。咱们一步步来解决：

1. 给iframe添加透明属性并调整CSS #

首先，修改你的iframe标签，加上allowtransparency="true"属性（兼容一些旧浏览器），同时更新CSS让iframe本身的背景透明：

修改后的HTML： #

<div class="border2"> 
  <iframe src="https://e-scapeps.com/hiscore/tindex.php" allowtransparency="true"> 
    <p>Your browser does not support iframes.</p> 
  </iframe> 
</div>

更新后的CSS： #

.border2 iframe { 
  border: none; 
  width: 1050px; 
  height: 1890px; 
  margin: 0; 
  padding: 0; 
  background-color: transparent; /* 核心：让iframe元素背景透明 */
  /* 如果你不需要整个iframe内容半透明，可以去掉下面这行opacity */
  opacity: 0.8; 
  display:block; 
  overflow-y: hidden; 
}

2. 确保iframe内部页面的背景也是透明的 #

这是最关键的一步！如果iframe加载的tindex.php页面本身设置了白色背景，那上面的设置还是没用。你需要修改这个内部页面的样式，把它的背景改成透明：

在tindex.php的CSS中添加：

body {
  background-color: transparent;
  margin: 0; /* 去掉默认的body外边距，避免不必要的留白 */
}

如果内部页面里还有其他容器（比如主div）设置了白色背景，也要把它们的background-color改成transparent或者inherit。

为什么这样有效？ #

通过让iframe元素和它内部的文档背景都变成透明，滚动时就会透出父页面的背景，不会再出现讨厌的白色块了。

内容的提问来源于stack exchange，提问作者Josh Gates