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

Question

我是HTML/CSS的新手,我试图将一些文本显示为50%透明.到目前为止,我有HTML来显示完全不透明的文本

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

但是,我不确定如何改变它的不透明度.我试过在线查看,但我不确定如何处理我找到的代码.

Answer 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.

Answer 2

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

顺便说一下,不推荐使用font标签,使用css来设置文本样式

div {
    opacity: 0.5;
}

编辑:此代码将使整个元素透明,如果你想**只是文本**透明检查@Mattias Buelens答案

这个答案是不正确的.它的代码使整个元素(div)半透明.该课题仅指明了该文本.选择较高的[兄弟姐妹的答案](http://stackoverflow.com/a/10835846/642706)应该是可以接受的. (18认同)
使用<span>,卢克! (15认同)

Answer 3

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

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

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

Answer 5

cssopacity属性呢？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/