あなたの背景を透明にする
印刷デザインでは簡単に行うことができますが、Web上ではできないものの1つは、画像や色付きの背景にテキストを重ねて表示し、その画像の透明度を変更して背景にフェードインします。 しかしCSS3には、要素の不透明度を変更してフェードイン/フェードインさせる不透明度のプロパティがあります。
Opacityプロパティの使用方法
不透明度プロパティは、透明度の値を0.0から1.0にします。
0.0は100％透明です。その要素より下のものは完全に表示されます。 1.0は100％不透明です。要素の下には何も表示されません。
したがって、要素を50％透明に設定するには、次のように記述します。
不透明度：0.5;
実際の不透明度の例を参照してください
古いブラウザでテストする
IE 6も7もCSS3不透明プロパティをサポートしていません。 しかし、あなたは運が出ていません。 代わりに、IEはMicrosoft専用のプロパティのアルファフィルタをサポートしています。 IEのアルファフィルタは0（完全に透明）から100（完全に不透明）までの値を受け入れます。 したがって、IEで透明度を取得するには、不透明度を100倍にして、スタイルにアルファフィルタを追加する必要があります。
フィルタ：アルファ（不透明度= 50）。
実際のアルファフィルタの表示（IEのみ）
ブラウザのプレフィックスを使用する
以前のバージョンのMozillaとWebkitブラウザでもサポートされるように、-moz-と-webkit-の接頭辞を使用する必要があります。
-webkit-opacity：0.5;
-moz-opacity：0.5;
不透明度：0.5;
常にブラウザのプレフィックスを最初に置き、有効なCSS3プロパティを最後に置きます。
古いMozillaおよびWebkitブラウザのブラウザプレフィックスをテストします。
イメージを透明にすることもできます
画像自体に不透明度を設定すると、背景にフェードします。 これは背景画像には本当に便利です。
また、アンカータグを追加すると、イメージの不透明度を変更するだけでホバー効果を作成できます。
a：ホバー img {
フィルタ：アルファ（不透明度= 50）
フィルタ：progid：DXImageTransform.Microsoft.Alpha（不透明度= 50）
-moz-opacity：0.5;
-webkit-opacity：0.5;
不透明度：0.5;
}
このHTMLに影響します：
上記のスタイルとHTMLの動作をテストします。
あなたのイメージにテキストを置く
不透明度を使用すると、イメージ上にテキストを配置し、そのテキストがどこにあるかのようにイメージがフェードアウトして見えるようにすることができます。
このテクニックはちょっと難しいですが、イメージ全体をフェードするので、単純にフェードできないからです。 またテキストボックスも消えるので、テキストボックスをフェードアウトできません。
- 最初にコンテナDIVを作成し、画像を内部に配置します。
- 空のDIVでイメージに従います。これが透明になります。
- HTMLに最後に追加するのは、テキストが入ったDIVです。
これは私の犬Shastaです。 彼はかわいいですか！ - イメージの上にテキストを配置するには、CSSの配置でスタイルを設定します。 私はテキストを左側に配置しましたが、左側の2つを変更することで右側に配置することができます。 右のプロパティ：0; 。
#image {
ポジション：相対;
幅：170px;
高さ：128ピクセル。
マージン：0;
}
#text {
位置：絶対;
トップ：0;
左：0;
幅：60px;
高さ：118px;
背景：#fff;
パディング：5px;
}
#text {
フィルタ：アルファ（不透明度= 70）。
フィルタ：progid：DXImageTransform.Microsoft.Alpha（不透明度= 70）;
-moz-opacity：0.70;
不透明度：0.7;
}
#words {
位置：絶対;
トップ：0;
左：0;
幅：60px;
高さ：118px;
背景：透明。
パディング：5px;
}
見た目を見る