HTML透明背景

Question

HTML透明背景

6

我想创建一个带有透明背景、表格和一些文本的网页。我看到了相关的帖子，但由于我对css不太熟悉，所以我无法使我的代码正常工作。我只想要一个透明的背景，而这段代码却让所有东西都变成了透明的。请有经验的人帮帮我。

<html>
<head><style type="text/css">
  div.transbg {background-color:#4a6c9b; opacity:0.6;}
</style></head>
<div class="transbg">
<body><Center><font color="#FFFFFF">
  <b>Toll Charges</b>
  <table bgcolor="#000000" cellspacing=3>
    <tr>
      <td bgcolor="#009900"><font color="#FFFFFF" align="left"> &nbsp; &nbsp;Class 2 inc Private&nbsp;</font></td>
      <td bgcolor="#009900"><font color="#FFFFFF" align="right"> &nbsp;A$ 4.95 &nbsp;</font></td>
    </tr>
    <tr>
      <td bgcolor="#009900"><font color="#FFFFFF" align="left"> &nbsp; &nbsp;Class 2 inc Commercial&nbsp;</font></td>
      <td bgcolor="#009900"><font color="#FFFFFF" align="right"> &nbsp;A$ 13.95 &nbsp;</font></td>
      </tr>
    </table>
    <br>
    Toll has to be paid within 48 hrs of passage, else an additional A$ 13.95 of administration charges would be added
    </font></Center>
</div>
</body>
</html>

更新

非常感谢大家的回答。我已经通过另一种方式解决了这个问题。实际上，我正在编写一个使用Webview显示一些html内容的iPhone应用程序。我想让webview具有透明度，可以通过在界面构建器中为webview本身设置alpha来实现。就像是让我的整个Web浏览器变成50%透明度。我要感谢在这里帮助过我的每个人。

- user315067

3

P.S: <font> 和 <center> 标签从 1998 年起就被废弃了(!!!)。请把你正在使用的陈旧的 HTML 教程/书籍扔掉，去找一本最近的教程。 - BalusC

是的，现在应该使用CSS来进行格式化。可以将其想象为所有属性（如<font>和bgcolor）都在一个位置完成。这样，您只需要使用类属性来确定样式即可。 - Jonno_FTW

4个回答

3

我建议使用rgba而不是opacity，如下所示：

.transbg {background: rgba(red,green,blue,opacity);}

你可以像这样将其他格式化内容放入CSS中：

body {background-color:#000;
      color:#fff;}
td {background-color: #090;
    color:#fff;}
.leftc {text-align:left;}
.rightc {text-align:right;}
table {borderspacing: 3;}

现在，您可以删除字体标签和td的属性。对于td，您只需要使用<td class="leftc">或使用rightc类将文本放置在右侧。

另请参见http://css-tricks.com/rgba-browser-support/。

- Jonno_FTW

2

我最近发现我想要创建一个具有透明背景的HTML body。（该HTML是应用程序指令的本地化信息页面，并将出现在“浏览器”中，实际上只是另一组视图中的Webkit视图。Webkit视图位于视图层次结构中的图像上方。通过使网页背景透明，Webkit视图后面的视图中的图像就会显示出来。）为了达到这个目的，请按照以下方式编写HTML代码，同时添加其他属性/样式等：

<body bgcolor=transparent>

换句话说，使用关键词 "transparent"，不用引号，就会得到 alpha 值为 0，从而获得透明背景，使背后的内容显示出来。

（注意：在我拥有的 Webkit 视图实现中，我还必须在我的 UI 设置中使 Webkit 背景颜色透明。也就是说，这两个条件都必须具备才能像我展示的那样工作。）

- john.k.doe

我在查找时偶然发现了这个问题，虽然它是一个老问题，但 bgcolor 已经被弃用，不应该再使用 - https://caniuse.com/#search=bgcolor - Craicerjack

0

我不确定您的要求是否有意义。只需将背景设置为所需的颜色即可。

div.transbg { background-color: #92a7c3; }

透明度只对背景图像或叠加的背景有意义，这似乎在您的特定情况下不适用。

- BalusC

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user295292 · Accepted Answer

我相信你正在寻找这个，

.transbg {
    background-color:#4a6c9b;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}

也许这个链接有帮助：http://css-tricks.com/rgba-browser-support/