如何更改 HTML/CSS 中的文本透明度？答案

【问题标题】：How to change text transparency in HTML/CSS?如何更改 HTML/CSS 中的文本透明度？
【发布时间】：2012-06-05 19:44:18
【问题描述】：

我对 HTML/CSS 非常陌生，我正在尝试将一些文本显示为 50% 透明。到目前为止，我有 HTML 来显示完全不透明的文本

<html><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>

但是，我不确定如何更改其不透明度。我已经尝试在网上查找，但我不确定如何处理我找到的代码。

【问题讨论】：

标签： html css opacity

【解决方案1】：

opacity 适用于整个元素，因此如果您对该元素有背景、边框或其他效果，这些效果也会变得透明。如果您只希望文本是透明的，请使用rgba。

#foo {
    color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0.5);

    font-size: 16pt;
    font-family: Arial, sans-serif;
}

另外，远离<font>。我们现在有 CSS。

【讨论】：

与公认的答案 IMO 相比，这是一个非常优越的解决方案。您无需向 HTML 添加额外的 span 元素即可将不透明度仅应用于文本。
这就是解决方案。
什么浏览器在这个意义上是“旧的”？
@RickDavies 根据caniuse.com，需要IE9或更高版本。如果你需要支持 IE8，你仍然需要回退。否则，您应该可以只使用rgba。
嗯，不透明度属性也不是。哇。

【解决方案2】：

勾选Opacity，您可以将此css属性设置为div，<p>或使用<span>要透明

顺便说一下，字体标签是deprecated，使用css来设置文字样式

div {
    opacity: 0.5;
}

编辑：此代码将使整个元素透明，如果您想让 ** 只是文本 ** 透明，请检查@Mattias Buelens 答案

【讨论】：

这个答案不正确。它的代码使整个元素（div）半透明。问题仅指定了文本。投票率较高的sibling answer 应该是被接受的。
谢谢。它真的帮助我在我的 wordpress 模板中隐藏了一个文本。而不是 (opacity: 0.5;) 我只是使用 (opacity:0;)。

【解决方案3】：

只需使用rgba 标记作为您的文本颜色。您可以使用opacity，但这会影响整个元素，而不仅仅是文本。假设你有一个边框，它也会使它变得透明。

.text
    {
        font-family: Garamond, serif;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
    }

【讨论】：

【解决方案4】：

您最好的解决方案是查看元素的“不透明度”标签。

例如：

.image
{
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

所以在你的情况下它应该看起来像：

<html><span style="opacity: 0.5;"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>

但是不要忘记 HTML5 不支持该标签。

你也应该使用 CSS :)

【讨论】：

【解决方案5】：

css opacity 属性呢？ 0 到 1 值。

但是你可能需要使用比“字体”更明确的 dom 元素。例如：

<html><body><span style=\"opacity: 0.5;\"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></span></body></html>

作为附加信息，我当然建议您在 html 元素之外使用 CSS 声明，但也尝试使用字体 css 样式而不是字体 html 标记。

对于跨浏览器 css3 样式生成器，请查看http://css3please.com/

【讨论】：

【解决方案6】：

简单！在你之后：

    <font color=\"black\" face=\"arial\" size=\"4\">

添加这个：

    <font style="opacity:.6">

您只需将“.6”更改为 1 到 0 之间的十进制数

【讨论】：

【解决方案7】：

没有像 background-opacity 这样的 CSS 属性，您只能使用它来更改元素背景的不透明度或透明度而不影响子元素，另一方面，如果您尝试使用 CSS opacity 属性，它不仅会改变背景的不透明度，还会改变所有子元素的不透明度。在这种情况下，您可以使用 CSS3 中引入的 RGBA 颜色，其中包括 alpha 透明度作为颜色值的一部分。使用 RGBA 颜色，您可以设置背景颜色以及透明度。

【讨论】：

【解决方案8】：

尝试使用mix-blend-mode: multiply;

color: white;
background: black;
mix-blend-mode: multiply;

MDN

tutorial

【讨论】：

【解决方案9】：

如果你对一个元素使用opacity，整个元素的效果（背景+里面的其他东西），你可以使用mix-blend-mode对特定元素的CSS属性，

参考这些网站：

https://css-tricks.com/almanac/properties/m/mix-blend-mode/

https://css-tricks.com/basics-css-blend-modes/

【讨论】：