blocks|key|557723|text|选中Opacity，您可以将此css属性设置为要使其透明的div、或使用|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|557724|顺便说一下，字体标签是deprecated，使用css设置文本样式|557725|div+{
++++opacity:+0.5;
}+|code-block|syntax|javascript|557726|编辑:此代码将使整个元素透明，如果您想使**只是文本**透明检查@Mattias+Buelens答案|557727|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/css3_pr_opacity.asp|1|http://www.w3schools.com/tags/tag_font.asp^0|X|3|13|6|2|7|0|0|B|A|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

Check <a href="http://www.w3schools.com/cssref/css3_pr_opacity.asp">Opacity</a>, You can set this css property to the div, the <code>&lt;p&gt;</code> or using <code>&lt;span&gt;</code> you want to make transparent

And by the way, the font tag is <a href="http://www.w3schools.com/tags/tag_font.asp">deprecated</a>, use css to style the text

<pre><code>div {
 opacity: 0.5;
} 
</code></pre>

Edit: This code will make the whole element transparent, if you want to make ** just the text ** transparent check @Mattias Buelens answer

blocks|key|557817|text|只需使用rgba标签作为文本颜色即可。您可以使用opacity，但这将影响整个元素，而不仅仅是文本。假设你有一个边框，这也会使它变得透明。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|557818|.text
++++{
++++++++font-family:+Garamond,+serif;
++++++++font-size:+12px;
++++++++color:+rgba(0,+0,+0,+0.5);
++++}|code-block|syntax|javascript|557819|entityMap^0|4|4|O|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

Just use the <code>rgba</code> tag as your text color. You could use <code>opacity</code>, but that would affect the whole element, not just the text. Say you have a border, it would make that transparent as well. 

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

blocks|key|341701|text|您最好的解决方案是查看元素的“不透明度”标签。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341702|例如：|341703|.image
{
++++opacity:0.4;
++++filter:alpha(opacity=40);+/*+For+IE8+and+earlier+*/
}|code-block|syntax|javascript|341704|因此，在您的示例中，它应该如下所示：|341705|<html><span+style="opacity:+0.5;"><font+color=\"black\"+face=\"arial\"+size=\"4\">THIS+IS+MY+TEXT</html>|341706|但是，不要忘记在HTML5中不支持该标记。|341707|您也应该使用CSS+:)|341708|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Your best solution is to look at the "opacity" tag of an element.

For example:

<pre><code>.image
{
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
}
</code></pre>

So in your case it should look something like :

<pre><code>&lt;html&gt;&lt;span style="opacity: 0.5;"&gt;&lt;font color=\"black\" face=\"arial\" size=\"4\"&gt;THIS IS MY TEXT&lt;/font&gt;&lt;/html&gt;
</code></pre>

However don't forget the tag isn't supported in HTML5.

You should use a CSS too :)

blocks|key|557683|text|那么css的opacity属性呢？0到1的值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|557684|但是，您可能需要使用比"font“更明确的dom元素。例如：|557685|<html><body><span+style=\"opacity:+0.5;\"><font+color=\"black\"+face=\"arial\"+size=\"4\">THIS+IS+MY+TEXT</body></html>|code-block|syntax|javascript|557686|作为附加信息，我当然建议您在html元素之外使用CSS声明，但也可以尝试使用font+css样式而不是font+html标记。|557687|有关跨浏览器的css3样式生成器，请查看http://css3please.com/|557688|entityMap|0|LINK|mutability|MUTABLE|url|http://css3please.com/^0|6|7|H|1|J|1|0|0|0|0|K|M|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

What about the css <code>opacity</code> attribute? <code>0</code> to <code>1</code> values.

But then you probably need to use a more explicit dom element than "font". For instance:

<pre><code>&lt;html&gt;&lt;body&gt;&lt;span style=\"opacity: 0.5;\"&gt;&lt;font color=\"black\" face=\"arial\" size=\"4\"&gt;THIS IS MY TEXT&lt;/font&gt;&lt;/span&gt;&lt;/body&gt;&lt;/html&gt;
</code></pre>

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.

For cross browser css3 styles generator, have a look at <a href="http://css3please.com/" rel="nofollow noreferrer">http://css3please.com/</a>

blocks|key|341728|text|简单！在您完成以下操作后：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341729|++++<font+color=\"black\"+face=\"arial\"+size=\"4\">|code-block|syntax|javascript|341730|添加这个：|341731|++++<font+style="opacity:.6">+|341732|您只需更改介于1和0之间的十进制数的".6“|341733|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Easy! after your:

<pre><code> &lt;font color=\"black\" face=\"arial\" size=\"4\"&gt;
</code></pre>

add this one: 

<pre><code> &lt;font style="opacity:.6"&gt; 
</code></pre>

you just have to change the ".6" for a decimal number between 1 and 0

blocks|key|557903|text|没有像background-opacity这样的CSS属性，它只能用于更改元素背景的不透明度或透明度，而不会影响子元素，另一方面，如果您尝试使用CSS属性，它不仅会更改背景的不透明度，还会更改所有子元素的不透明度。在这种情况下，您可以使用CSS3中引入的RGBA颜色，其中包含alpha透明度作为颜色值的一部分。使用RGBA颜色，您可以设置背景的颜色以及其透明度。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|557904|entityMap|0|LINK|mutability|MUTABLE|url|http://www.themexpro.com/^0|O|3|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

There is no <a href="http://www.themexpro.com/" rel="nofollow">CSS</a> property 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.

blocks|key|557928|text|试着玩玩mix-blend-mode:+multiply;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|557929|color:+white;
background:+black;
mix-blend-mode:+multiply;|code-block|syntax|javascript|557930|MDN|557931|tutorial|557932|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode|1|https://www.youtube.com/watch?v=vs34f9FiHps&t=74s^0|4|P|0|0|0|3|0|0|0|8|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|N|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

try to play around with <code>mix-blend-mode: multiply;</code>

<pre><code>color: white;
background: black;
mix-blend-mode: multiply;
</code></pre>

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode" rel="nofollow noreferrer">MDN</a>

<a href="https://www.youtube.com/watch?v=vs34f9FiHps&amp;t=74s" rel="nofollow noreferrer">tutorial</a>

blocks|key|341887|text|如果你对一个元素使用opacity，整个元素都会起作用(background%2Bother里面的东西)，你可以对特定元素的CSS属性使用mix-blend-mode，|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|341888|请参考以下站点：|341889|https://css-tricks.com/almanac/properties/m/mix-blend-mode/|341890|https://css-tricks.com/basics-css-blend-modes/|341891|entityMap|0|LINK|mutability|MUTABLE|url|1^0|A|7|1V|E|0|0|0|1N|0|0|0|1A|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|J|3|K|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|L|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|I]]|S|$5|O|P|Q|E|$R|K]]]]

If you use <code>opacity</code> to a element, entire element effect that(background+other things in it),you can use <code>mix-blend-mode</code> to the CSS attributes of the specific element,
Refer these sites:
<a href="https://css-tricks.com/almanac/properties/m/mix-blend-mode/" rel="nofollow noreferrer">https://css-tricks.com/almanac/properties/m/mix-blend-mode/</a>
<a href="https://css-tricks.com/basics-css-blend-modes/" rel="nofollow noreferrer">https://css-tricks.com/basics-css-blend-modes/</a>

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

<pre><code>&lt;html&gt;&lt;font color=\"black\" face=\"arial\" size=\"4\"&gt;THIS IS MY TEXT&lt;/font&gt;&lt;/html&gt;
</code></pre>

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.

How to change text transparency in HTML/CSS?

HTML5

我对HTML/CSS非常陌生，我正在尝试将一些文本显示为50%透明。到目前为止，我已经用HTML完全不透明地显示了文本<html>THIS IS MY TEXT</html>然而，我不确定如何改变它的不透明性。我试着在网上查找，但我不确定如何处理我找到的代码。

问如何改变HTML/CSS中的文本透明度？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何改变HTML/CSS中的文本透明度？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何改变HTML/CSS中的文本透明度？
EN