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

Posted

技术标签:

【中文标题】如何获得`HTML > Body > Background-Color > Transparent`？【英文标题】：How do I get `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 【参考方案1】：

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

body  
    background-color: transparent;

这将使&lt;html&gt; 元素的背景可见。

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

【讨论】：

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

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

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

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

body  background-color:transparent;

在您链接到页面&lt;head&gt; 部分的 CSS 文件中，如下所示：

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

【讨论】：

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

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

【讨论】：

我需要在哪里添加？ 最好在&lt;head&gt;标签中链接到的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】：

使用 bodybackground:none transparent; 要么 &lt;body style="background:none transparent;"&gt; 您的 iframe 中不需要 allowtransparency ="true"。

【讨论】：

以上是关于如何获得`HTML > Body > Background-Color > Transparent`？的主要内容，如果未能解决你的问题，请参考以下文章

不让文本框获得焦点

responseXML怎么获得标签属性？

html标签中如何设置属性，让<body></body>里的内容上下左右居中？

javascript 获得以秒计的视频时长

html标签中如何设置属性，让<body></body>里的内容上下左右居中？

Retrofit 2.0如何获得反序列化错误response.body