web-dev-qa-db-ja.com

HTML / CSSでテキストの透明度を変更する方法

私はHTML/CSSにとても不慣れで、50％透明のようにテキストを表示しようとしています。これまでのところ、私は完全な不透明度でテキストを表示するためのHTMLを持っています

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

しかし、不透明度を変更する方法がわかりません。私はオンラインで見てみましたが、私が見つけたコードをどうするか正確にはわかりません。

htmlcssopacity
95
Nosrettap

チェック 不透明度 、このcssプロパティをdiv、<p>、または透明にしたい<span>に設定できます。

ところで、フォントタグは 廃止予定 です。テキストのスタイルを設定するにはcssを使用してください。

div {
    opacity: 0.5;
}

編集：あなたは**ちょうどテキスト**透明にしたい場合は、このコードは、全体の要素が透明になります@Mattias Buelens答え

95
Mario Corchero

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

236
Mattias Buelens

テキストの色としてrgbaタグを使うだけです。 opacityを使うこともできますが、それはテキストだけでなく要素全体に影響します。あなたがボーダーを持っているとしたら、それは同様にそれを透明にするでしょう。

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

あなたの最善の解決策は、要素の "opacity"タグを見ることです。

例えば：

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

ただし、HTML 5ではタグがサポートされていないことを忘れないでください。

あなたもCSSを使うべきです:)

9
MajuiF

Css opacity属性についてはどうですか？ 0から1までの値。

しかし、その場合はおそらく "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宣言を使うことをもちろんお勧めしますが、同様にフォントhtmlタグの代わりにフォントcssスタイルを使うことを試みなさい。

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

3
Sebas

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

3
Imon

簡単です！あなたの後：

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

これを追加する：

    <font style="opacity:.6">

1と0の間の10進数のために ".6"を変更するだけです。

3
user3067297

mix-blend-mode: multiply;で遊ぼう

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

MDN

チュートリアル

2
Dmitry Grinko