CSSを使用すると、透明の画像を簡単に作成できます。
注意：CSS Opacityプロパティは、W3C CSS3勧告の一部です。
例1 - 透明なイメージを作成します。
透明度のCSS3の属性が不透明です。
まず、我々はCSSで透明なイメージを作成する方法を紹介します。
通常の画像
同じイメージで透明度：
以下のCSSを考えてみます。
IMG {不透明：0.4;フィルター：アルファ（不透明度= 40）; / * IE8以前の* /}
IE9、Firefoxの、クロム、オペラ、およびSafariブラウザは、画像の透明性が不透明になる可能性が使用しています。1.0 - 不透明度が0.0から属性値。値が小さいほど、そのような要素がより透明こと。
IE8以前のバージョンフィルタ：アルファ（不透明度= X）。100 - Xは、0からの値を取ることができます。低い値、そのような要素はより透明います。
実施例2 - イメージの透明度 - 効果ホバー
画像の上にマウスを移動します。
CSSスタイル：
IMG {不透明：0.4;フィルター：アルファ（不透明度= 40）; / * IE8以前の* /} IMG：ホバー{不透明：1.0;フィルター：アルファ（不透明度= 100）; / * IE8およびそれ以前バージョン* /}
CSSは、実施例1におけるブロックとコードと同様です。また、当社は、ユーザーが画像の1ときにカーソルを合わせると何が起こるか追加されました。この場合、ユーザが画像の上に置いたときに、私たちは絵が明確であることを願っています。
これは、CSSです：不透明度= 1。
IE8以前のバージョン：フィルター：アルファ（不透明度= 100）。
アウェイマウスポインタが、再透明になる画像を画像から。
例3 - でクリアテキストボックス
透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。
次のようにソースコードは次のとおりです。
透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。透明ボックス内のテキスト。
まず、背景画像との境界線を持つdiv要素の固定の高さと幅を作成します。その後、我々は最初のdivの内側に小さいdiv要素を作成します。divが固定幅、背景色、境界線を持っている - そしてそれは透明です。透明divの内部では、我々は、P要素の中にいくつかのテキストを追加します。（編集：Leilin鵬出典：削除されたネットワーク侵入）