制作者の活動(PR)。

body {
    background: #d1df9c url("Background.GIF");
    }

p.sample1 {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #090;
    font-weight: bold;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=60);
    }

p.sample2 {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #090;
    font-weight: bold;
    opacity: 0.8;
    filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=80);
    }

p.sample3 {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #090;
    font-weight: bold;
    }

opacityプロパティでは透過度を 0から 1までの実数で
filterプロパティではOpacityパラメータに透過値を 0から100までの整数で

それぞれ表します。

注意すべき事として、必ずwidthプロパティで横幅を指定しなければなりません。

これは、インターネットエクスプローラのフィルタはwidthプロパティで横幅が指定されていないと機能しない事があるからです。

透過度指定を行っているCSSの記述例はここまで

一方、HTML文書は以下のようになります(重要な部分のみ)。

サンプルHTMLを読み飛ばす

<title>透過度サンプル。</title>
<p class="sample1">透過度0.6の場合。</p>
<p class="sample2">透過度0.8の場合。</p>
<p class="sample3">透過度無指定の場合。</p>

サンプルHTMLはここまで

実際にこのスタイルを当てたHTML文書を、透過度に対応しているファイヤーフォックス 2.0とインターネットエクスプローラ 6.0及び透過度に対応していないオペラ 8.5で表示させてみましょう。

ファイヤーフォックス 2.0の場合、一行目の透過度0.6では背景の模様が良く見えます。

また、文字にも透過度が適用されるためちょっと読み難くなっております。

このように前景を含む要素で透過度を適用すると読み難くなる恐れがありますので注意しましょう。

二行目の透過度0.8でも背景の模様がうっすらと見えるようになっております。

三行目は透過度を指定していないため、完全な不透明となり、従って背景の模様は全く見えなくなります。

インターネットエクスプローラ 6.0の場合もファイヤーフォックスと全く同様の見え方となります。

オペラ 8.5は透過度に対応していないため、三行とも完全な不透明となり、従って背景の模様は全く見えません。

オペラ 8.5のように透過度に対応しない環境も少なくはないので(オペラは9.0以降で実装)、先ず透過度プロパティを与えずに表示させてみて問題無いと確信が取れてから透過度プロパティを与えると良いでしょう。
また、サンプルでも問題が生じておりますが、透過度は背景のみならず前景にも影響を与えます。その結果文字も半透明になって可読性を損ねる恐れもある事を忘れないで下さい。

目次の先頭

この頁の本文はここまでです(本文の先頭へ)

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com