如何获得`HTML > Body > Background-Color > Transparent`？答案

【问题标题】：How do I get `HTML > Body > Background-Color > Transparent`?如何获得`HTML > Body > Background-Color > Transparent`？
【发布时间】：2014-06-27 04:02:16
【问题描述】：

我有这个HTML：

<html>
    <head>
    </head>

    <body bgcolor="#FFFFFF" style="margin:0px;padding:0px;">
        <div style="width:100%; color:#000000; padding:25px; font-family: Segoe UI;font-size: 17px;">
        </div>
    </body>
</html>

我已经用bgcolor="#FFFFFF" 设置了背景颜色。但是我该如何让它变得透明呢？

【问题讨论】：

透明 ??是白色的还是你想让那种颜色变薄？？如果是这样，有一个名为 opacity 的属性，请尝试一下
也许是时候看看stylesheets了。
只需删除该属性..即bgcolor

标签： html css background background-color opacity

【解决方案1】：

HTML 没有提供指定透明背景的方法（并且它必须指定任何类型的背景的方法已过时且不应使用）。您可以在 CSS 中执行此操作。

body { 
    background-color: transparent;
}

这将使<html> 元素的背景可见。

没有办法让浏览器窗口透明。

【讨论】：

“没有办法让浏览器窗口透明。”... 即使有...你希望在另一边看到什么。 :)
操作系统窗口下方的任何内容 :)
我可以想到一个用例：例如，当使用 Chrome 无头 Selenium Web 驱动程序截屏时，我希望生成的 PNG 透明（除了可见元素） .
我可以想到另一个用例：在为 Chrome 扩展程序制作 popup.html 时。这是在单击扩展程序添加到浏览器的按钮时显示的 html 位（地址栏旁边）。我试图将边缘变圆，但现在可以看到一个白框的角。我想要这个透明的。不幸的是，这个解决方案没有做到这一点。
@Paulie_D，像 OBS 这样的流媒体软件现在可以使用透明背景，对于 html、js 和 css 中的动态叠加非常有用。

【解决方案2】：

使用内联样式，您可以通过以下方式实现：

<body style="background-color: transparent;">

但更好的选择是输入以下代码：

body { background-color:transparent; }

在您链接到页面<head> 部分的 CSS 文件中，如下所示：

<link rel="stylesheet" type="text/css" href="NAMEOFFILE.css">

【讨论】：

我只需要在head 标签内添加body { background-color:transparent; } 对吗？
@user2056563 此代码只会使其相对于“背后”的元素透明，即<html> 标签。
@user2056563 - 不。阅读答案最后一段的前四个字。
我没有任何 css 文件，但我们可以在 head 部分添加吗？你能告诉我怎么做吗，因为我是新来的
去看看任何基本的 CSS 教程。

【解决方案3】：

background-color: transparent;

更新
但是，您无法使浏览器窗口透明。所以，即使你使用上面的代码，你的背景仍然是白色的。

【讨论】：

我需要在哪里添加？
最好在<head>标签中链接到的CSS文件中。
在正文样式中，或在单独的 css 文件中。
这构成了标记中body 元素的样式属性。顺便说一句，我建议您将所有样式指令移到单独的样式表中并链接到该样式表，而不是使用内联样式指令散布您的标记。
是的，但考虑在 iframe 中加载的 HTML。带有正文透明的 iframe 中的 HTML 可以正常工作，并且根本不会绘制 BG 颜色。

【解决方案4】：

你需要使用 CSS 而不是 HTML 属性来设置透明背景：

<body style="background: transparent; margin: 0; padding: 0;">

最好有一个样式表，用于放置样式的页面，而不是在 HTML 元素中放置样式。

注意：要使 iframe 具有透明背景（这是在页面上使用透明背景的唯一方法），您需要将 allowtransparency 属性添加到 iframe 标记以使其在 IE 中工作：

<iframe .... allowtransparency="true"></iframe>

【讨论】：

这些都不会使浏览器窗口透明，html 仍将默认为白色背景，如果不使用 Windows GDI 操作窗口，这是不可行的，即使那样我想它也不会更容易。

【解决方案5】：

body {

    background-color: rgba(255, 255, 255, 0.5)
};

最后一个值是 alpha - 它将透明度值设置在 0 和 1 之间； 0 透明；

【讨论】：

【解决方案6】：

使用 body{background:none transparent;} 要么 <body style="background:none transparent;"> 您的 iframe 中不需要 allowtransparency ="true"。

【讨论】：