ONZE/BLOGオンズ開発ブログ

文字の色を透明にして見えなくする方法を4つ紹介します。

opacityを使う

いちばん簡単で、最初に思いつくのは「opacity:0;」を指定する方法です。

.sample {
	opacity:0;
}

opacityの値は0〜1の間で指定し、「0」が完全に透明、「1」が完全に不透明な状態になります。

transparentを使う

続いては「color:transparent;」を指定する方法です。

.sample {
	color:transparent;
}

RGBAを使う

RGBAを使うのも有効です。

.sample {
	color:rgba(255,255,255,0);
}

rgba()は、RGBAカラーモデルで色を指定するテクニックです。
rgba()で色を指定する際には、カンマ（,）区切りにした3つの数値でRGBの色を指定した後、第4引数で透明度を指定します。

なお透明度はopacityの時と同じく「0」が完全に透明、「1」が完全に不透明になります。

たとえば白色color:rgb(255,255,255);を50%の不透明度にしたい場合は次のように記述します。

.sample {
	color:rgba(255,255,255,0.5);
}

visibilityを使う

visibilityプロパティは、要素の表示・非表示を指定する際に使用します。

.sample {
	visibility:hidden;
}

「display:none;」と「visibility:hidden;」の違い

「display:none;」は要素の存在が完全に無いものとして扱われますが、「visibility:hidden;」では要素の存在はそのままに、単に見えない状態になります。