Question

我有一个页面，其中使用以下方法将背景设置为完全透明：

body {
  background:none transparent!important;
}

这可以按预期工作，我在另一个网站上的透明iframe中显示此页面，并且希望通过该页面查看网站背景。

但是，如果我直接访问该页面，则背景显示为白色（必须正确吗？）

这是硬编码的浏览器还是有办法将其设置为黑色？

网站代码：

<div class="page-background ">
    <div class="header">
      <span>Website menu here</span>
      <span><a href="index.html">Book</a></span>
      <span><a href="about.html">About</a></span>
      <span><a href="contact-us.html">Contact Us</a></span>
    </div>
    <iframe src="http://localhost:4500" allowtransparency="true"></iframe>
  </div>

Answer 1

直接访问时，您的body的父节点为html，背景为白色。这就是您看到白色背景的原因。如果您想看到黑色，则需要将html设置为黑色背景

html {
  background: #000;
  margin: 0;
  height: 100%;
}

body {
  background: #fff;
  height: 100%;
  margin: 0;
}

<button onclick="document.body.style.background = 'transparent';">
  Make Transparent
</button>

Answer 2

只需创建这三个文件并在background-image属性中提供图像链接，则第二个文件名应为test2.html，第三个文件名应为test3.html。然后运行第一个文件，然后单击预订选项。

<html>
<body style="background-image:url('wallpaper2you_462082.jpg');background-size:cover">
<div class="page-background ">
    <div class="header">
      <span>Website menu here</span>
      <span><a href="test2.html" target="iframe">Book</a></span>
      <span><a href="about.html">About</a></span>
      <span><a href="contact-us.html">Contact Us</a></span>
    </div>
    <iframe src="test3.html" allowtransparency="true" name="iframe"></iframe>
  </div>
</body>
</html>

<html>
<body style='color:white'>
<p>Hi</p>
<p>How are you?</p>
</body>
</html>

<html>
<body style='color:red'>
<p>Hi</p>
<p>How are you?</p>
<p>Tell me about yourself.</p>
</body>
</html>

背景透明时如何为页面设置默认背景色

2 个答案: