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

问题描述 投票:88回答:8

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

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

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

html css opacity
8个回答
91
投票

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

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

div {
    opacity: 0.5;
} 

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


232
投票

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。


15
投票

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

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

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


3
投票

简单!在你之后:

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

添加这个:

    <font style="opacity:.6"> 

你只需要改变“.6”表示1到0之间的十进制数


3
投票

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


3
投票

css opacity属性怎么样? 01的价值观。

但是,您可能需要使用比“font”更明确的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/


2
投票

试着玩mix-blend-mode: multiply;

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

MDN

tutorial

© www.soinside.com 2019 - 2024. All rights reserved.