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

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。 然后运行第一个文件，然后单击book选项。

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

解决方案1
1 2019-07-04 02:15:07

解决方案2
0 2019-07-04 06:33:17

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

问题描述

2 个解决方案

解决方案1 1 2019-07-04 02:15:07

解决方案2 0 2019-07-04 06:33:17

解决方案1
1 2019-07-04 02:15:07

解决方案2
0 2019-07-04 06:33:17