133

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

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

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

4

9 回答 9

301

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。

于 2012-05-31T14:43:56.103 回答
113

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

顺便说一句，不推荐使用字体标签，使用 css 设置文本样式

div {
    opacity: 0.5;
}

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

于 2012-05-31T14:25:08.323 回答
18

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

.text
    {
        font-family: Garamond, serif;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
    }
于 2014-12-02T16:30:26.437 回答
11

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

例如：

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

于 2012-05-31T14:29:02.273 回答
6

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/

于 2012-05-31T14:22:41.840 回答
4

简单的！在你之后：

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

添加这个：

    <font style="opacity:.6">

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

于 2013-12-04T19:14:25.800 回答
3

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

于 2015-02-19T10:29:25.377 回答
2

试着玩mix-blend-mode: multiply;

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

MDN

教程

于 2018-09-10T20:07:13.793 回答
1

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

参考这些网站：

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

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

于 2020-12-06T15:22:03.623 回答