如何更改 HTML/CSS 中的文本透明度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10835500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change text transparency in HTML/CSS?
提问by Nosrettap
I'm very new to HTML/CSS and I'm trying to display some text as like 50% transparent. So far I have the HTML to display the text with full opacity
我对 HTML/CSS 非常陌生，我正在尝试将一些文本显示为 50% 透明。到目前为止，我有 HTML 以完全不透明的方式显示文本
<html><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>
However, I'm not sure how to change its opacity. I've tried looking online, but I'm not sure exactly what to do with the code I find.
但是，我不确定如何更改其不透明度。我试过在网上查找，但我不确定如何处理我找到的代码。
回答by Mattias Buelens
opacityapplies to the whole element, so if you have a background, border or other effects on that element, those will also become transparent. If you onlywant the text to be transparent, use rgba.
opacity适用于整个元素，因此如果该元素上有背景、边框或其他效果，它们也会变得透明。如果您只希望文本透明，请使用rgba.
#foo {
color: #000; /* Fallback for older browsers */
color: rgba(0, 0, 0, 0.5);
font-size: 16pt;
font-family: Arial, sans-serif;
}
Also, steer far, far away from <font>. We have CSS for that now.
另外，要远离，远离<font>。我们现在有 CSS。
回答by Mario Corchero
Check Opacity, You can set this css property to the div, the <p>or using <span>you want to make transparent
检查Opacity，您可以将此 css 属性设置为 div，<p>或者使用<span>您要使其透明
And by the way, the font tag is deprecated, use css to style the text
顺便说一句，不推荐使用字体标签，请使用 css 设置文本样式
div {
opacity: 0.5;
}
Edit: This code will make the whole element transparent, if you want to make ** just the text ** transparent check @Mattias Buelens answer
编辑：此代码将使整个元素透明，如果你想让 ** 只是文本 ** 透明检查@Mattias Buelens 回答
回答by Harry Escott
Just use the rgbatag as your text color. You could use opacity, but that would affect the whole element, not just the text. Say you have a border, it would make that transparent as well.
只需使用rgba标签作为您的文本颜色。您可以使用opacity，但这会影响整个元素，而不仅仅是文本。假设您有一个边框，它也会使边框变得透明。
.text
{
font-family: Garamond, serif;
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
}
回答by MajuiF
Your best solution is to look at the "opacity" tag of an element.
最好的解决方案是查看元素的“opacity”标签。
For example:
例如：
.image
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
So in your case it should look something like :
所以在你的情况下它应该看起来像：
<html><span style="opacity: 0.5;"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>
However don't forget the tag isn't supported in HTML5.
但是不要忘记 HTML5 不支持该标签。
You should use a CSS too :)
你也应该使用 CSS :)
回答by Sebas
What about the css opacityattribute? 0to 1values.
cssopacity属性呢？0到1值。
But then you probably need to use a more explicit dom element than "font". For instance:
但是，您可能需要使用比“字体”更明确的 dom 元素。例如：
<html><body><span style=\"opacity: 0.5;\"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></span></body></html>
As an additional information I would of course suggest you use CSS declarations outside of your html elements, but as well try to use the font css style instead of the font html tag.
作为附加信息，我当然建议您在 html 元素之外使用 CSS 声明，但也尝试使用字体 css 样式而不是字体 html 标签。
For cross browser css3 styles generator, have a look at http://css3please.com/
对于跨浏览器 css3 样式生成器，请查看http://css3please.com/
回答by Imon
There is no CSSproperty like background-opacity that you can use only for changing the opacity or transparency of an element's background without affecting the child elements, on the other hand if you will try to use the CSS opacity property it will not only changes the opacity of background but changes the opacity of all the child elements as well. In such situation you can use RGBA color introduced in CSS3 that includes alpha transparency as part of the color value. Using RGBA color you can set the color of the background as well as its transparency.
没有像 background-opacity 这样的CSS属性，您只能使用它来更改元素背景的不透明度或透明度而不影响子元素，另一方面，如果您尝试使用 CSS opacity 属性，它不仅会改变背景的不透明度，但也会改变所有子元素的不透明度。在这种情况下，您可以使用 CSS3 中引入的 RGBA 颜色，将 alpha 透明度作为颜色值的一部分。使用 RGBA 颜色，您可以设置背景的颜色及其透明度。
回答by user3067297
Easy! after your:
简单！在您之后：
<font color=\"black\" face=\"arial\" size=\"4\">
add this one:
添加这个：
<font style="opacity:.6">
you just have to change the ".6" for a decimal number between 1 and 0
您只需将“.6”更改为 1 到 0 之间的十进制数
