背景透明时如何为页面设置默认背景色
[英]How to set a default background color for a page when the background is transparent
问题描述
I have page in which I have set the background as completely transparent using: 
我在其中使用以下命令将背景设置为完全透明的页面：
body {
background:none transparent!important;
}
This works as intended I am displaying this page in a transparent iframe on a different website and I want to see the website background through the page. 这可以按预期工作，我在另一个网站上的透明iframe中显示此页面，并且希望通过页面查看网站背景。
However if I access the page directly the background shows as white (its got to be something right?) 但是，如果我直接访问该页面，则背景显示为白色（一定正确吗？）
Is this a hardcoded browser thing or is there a way I can set this to black? 这是硬编码的浏览器，还是有办法将其设置为黑色？
Website code: 网站代码：
<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>
2 个解决方案
解决方案1
1 2019-07-04 02:15:07
When you access directly, your body has its parent as html which has background as white. 当您直接访问时，您的body的父级为html ，背景为白色。 This is the reason you see the white background. 这就是您看到白色背景的原因。 If you want to see black, you need to set your html to black background 如果要看到黑色，则需要将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>
解决方案2
0 2019-07-04 06:33:17
Just create these three files and provide the image link in background-image attribute then second file name should be test2.html and third file name shoud be test3.html. 只需创建这三个文件并在background-image属性中提供图像链接，则第二个文件名应为test2.html，第三个文件名应为test3.html。 Then run the first file and click on book option. 然后运行第一个文件，然后单击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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.