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

112

我是HTML / CSS的新手，我想将某些文本显示为50％透明。到目前为止，我已经有了HTML来显示完全不透明的文本

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

但是，我不确定如何更改其不透明度。我尝试过在线查找，但是我不确定该如何处理找到的代码。

html css opacity

— Nosrettap
source

267

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。

— 马蒂亚斯·比伦斯（Mattias Buelens）
source

8

与公认的答案IMO相比，这是一种优越得多的解决方案。您无需向HTML添加其他span元素即可将不透明度仅应用于文本。

— kinsho 2014年

这是解决方案。

— GhitaB 2014年

从这个意义上讲，哪些浏览器是“旧的”？

— 里克·戴维斯

1

@RickDavies根据caniuse.com，需要IE9或更高版本。如果您需要支持IE8，则仍然需要后备。否则，您只需使用just就可以了rgba。

— Mattias Buelens 2015年

嗯，不透明度属性也不是。哇。

— trusktr 2015年

105

检查不透明度，您可以将此css属性设置为div，<p>或者使用<span>您想使其透明的

顺便说一句，不推荐使用font标签，使用CSS设置文本样式

div {
    opacity: 0.5;
}

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

— 马里奥·科切罗（Mario Corchero）
source

16

使用<span>，卢克！

— pilau

20

这个答案是不正确的。它的代码使整个元素（div）半透明。该课题只规定了案文。投票率较高的同级答案应该是被接受的答案。

— 罗勒·布尔克

谢谢。它确实帮助我在wordpress模板中隐藏了文本。我使用的是（opacity：0;），而不是（opacity：0.5;）。

— Marcielli Oliveira

17

只需将rgba标签用作文本颜色即可。您可以使用opacity，但这会影响整个元素，而不仅仅是文本。假设您有边框，那么边框也会变得透明。

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

— 哈里·埃斯科特
source

9

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

例如：

.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 :)

— 马奎夫
source

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/

— 塞巴斯
source

3

简单！在您之后：

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

添加这一点：

    <font style="opacity:.6">

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

— 用户名
source

3

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

— 我上线了
source

2

尝试和 mix-blend-mode: multiply;

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

MDN

教程

— 德米特里·格林科
source