HTML / CSSでテキストの透明度を変更するにはどうすればよいですか?


112

私はHTML / CSSに非常に慣れていないので、一部のテキストを50%透明のように表示しようとしています。これまでのところ、テキストを完全に不透明に表示するHTMLがあります。

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

ただし、不透明度を変更する方法がわかりません。オンラインで調べてみましたが、見つけたコードをどう処理すればよいかわかりません。

回答:


267

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があります。


8
受け入れられた回答であるIMOに比べてはるかに優れたソリューションです。テキストにのみ不透明度を適用するために、HTMLに追加のspan要素を追加する必要はありません。
金賞2014

これが解決策です。
GhitaB 2014年

この意味で「古い」ブラウザは何ですか?
Rick Davies

1
よると@RickDavies caniuse.com、IE9以降が必要です。IE8をサポートする必要がある場合でも、フォールバックが必要です。それ以外の場合は、だけで問題ありませんrgba
Mattias Buelens、2015年

うーん、どちらも不透明度プロパティではありません。ワオ。
trusktr 2015年

105

チェック不透明度を、あなたはdiv要素に、このCSSのプロパティを設定することができ、<p>または使用して<span>、あなたが透明にします

ちなみに、fontタグは廃止予定です。CSSを使用してテキストのスタイルを設定してください

div {
    opacity: 0.5;
} 

編集:このコードは要素全体を透明にします。**テキストのみ**透明にしたい場合は、@ Mattias Buelensの回答を確認してください


16
<span>を使って、ルーク!
ピラウ

20
この答えは間違っています。そのコードは、要素(div)全体を半透明にします。質問はテキストのみを指定しました。投票数の多い兄弟の答えが受け入れられます。
バジルブルク14

ありがとうございました。ワードプレステンプレートのテキストを非表示にするのに役立ちました。(opacity:0.5;)の代わりに、(opacity:0;)を使用しました。
Marcielli Oliveira

17

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も使用する必要があります:)


5

css opacity属性はどうですか?値。01

ただし、おそらく「フォント」よりも明確な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宣言を使用することをお勧めしますが、フォントのhtmlタグの代わりにフォントのcssスタイルを使用してみてください。

クロスブラウザーのcss3スタイルジェネレーターについては、http: //css3please.com/をご覧ください。


3

かんたん!あなたの後:

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

これを追加:

    <font style="opacity:.6"> 

1から0までの10進数の「.6」を変更するだけです


3

子要素に影響を与えずに要素の背景の不透明度または透明度を変更するためにのみ使用できるbackground-opacityなどのCSSプロパティはありませんが、CSS opacityプロパティを使用しようとすると、背景の不透明度ですが、すべての子要素の不透明度も変更します。このような状況では、CSS3で導入されたRGBAカラーを使用できます。これには、カラー値の一部としてアルファ透明度が含まれます。RGBAカラーを使用して、背景の色と透明度を設定できます。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.