【まとめ】CSSの概要transparency_html/css_WEB-ITnose

近年、CSS の不透明度は非常に人気のあるテクノロジーですが、クロスブラウザーのサポートという点では、開発者にとって頭の痛い問題であると言えます。現時点では、現在使用しているすべてのブラウザで透明度設定が機能することを保証する普遍的な方法はありません。

この概要では主に、この便利な CSS テクノロジーをプロジェクトに実装してすべてのブラウザーと互換性を持たせるための CSS 不透明度の詳細な紹介、コード例、および説明を提供します。

CSS の透明性について注意すべき点の 1 つは、CSS は長年使用されてきたにもかかわらず、標準のプロパティではなかったということです。これは非標準テクノロジーであり、CSS3 仕様の一部である必要があります。

1. 古い不透明度設定

次のコードは、古いバージョンの Firefox と Safari で必要な透明度設定です:

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->#myElement {      -khtml-opacity: .5;      -moz-opacity: 0.5;  }  

-khtml-opacity 設定は、古いバージョンの Webkit レンダリング エンジン用です。この専用プロパティは現在、 Safari 1.x との互換性が必要なユーザーがまだいる場合を除き、廃止されます。

2 行目は、Mozilla レンダリング エンジンの以前のバージョンとの互換性を確保し、Netscape Navigator に戻るための専用属性 -moz-opacity を使用しています。 Firefox 0.9 では -moz-opacity 属性を使用する必要がなく、Firefox 3.5 (現在は Gecko エンジンを使用) ではこの属性はサポートされなくなりました。

2. Firefox、Safari、Chrome、Opera での CSS 透明度

次のコードは、IE を除くすべての現在のブラウザーにおける不透明度設定の最も単純で最新の CSS 構文です。

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->#myElement {      opacity: .7;  }  

上記の構文は要素を 70% 不透明 (または 30% 透明) に設定します。 opacity:1 を設定すると要素が不透明になり、opacity:0 を設定すると要素が完全に非表示になります。 「不透明度」が「不透明度」と同等であれば覚えやすいです。不透明度の値が小さいほど透明に近づきます。

不透明度属性は小数点第 2 位まで正確に指定できるため、可視性を検出するのは困難ですが、値「.01」と「.02」は実際には異なります。通常の状況では、「.3」や「.7」などの値で 1 桁の精度があれば十分です。

3. IE での CSS の透明度

IE は他のブラウザとは依然として異なり、現在広く使用されている 3 つの異なるバージョンの IE があり、制御するには追加の CSS が必要になる場合があります。上記の CSS は、専用のフィルター属性を使用して IE6-8 の透明度を設定します。

IE6 および IE7 の注意: 透明度の設定を有効にするには、要素が「レイアウト」である必要があります

。要素は、幅や位置などの一部の CSS プロパティを使用してレイアウトできます。 Microsoft 独自の hasLayout プロパティの詳細と、それをトリガーする方法については、ここを参照してください。

IE8 で CSS 透明度を設定する別の方法には次の構文があります (コメントに示されているバージョンに注意してください):

#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* 最初の行は IE6、IE7、IE8 で有効です*/ -ms-filter:

"progid:DXImageTransform.Microsoft.Alpha(opacity=40)" /*2 行目は IE8 でのみ有効です*/ }

最初に コードの最初の行は現在のすべての IE バージョンを対象にしており、2 行目は IE8 のみを対象としています。

コードの 2 行の違いに注目してください。コードの 2 行目では、フィルター属性の前に -ms- プレフィックスがあり、属性値が引用符で囲まれています。これは構文で必須です。

正直に言うと、前の例で alpha(opacity=40) 構文を使用して IE のどのバージョンのレイアウト要素にも適用した後でも、「progid」メソッドを使用する必要があるかどうかはわかりません。

4. JavaScript を使用して CSS の透明度を設定および変更する

JavaScript で CSS の不透明度プロパティにアクセスするには、次の構文を使用できます:

document.getElementById("myElement").style.opacity = ".4";

// すべての最新ブラウザの場合 document.getElementById("myElement").style.filter =

"alpha(opacity=40)";//IE の場合

上記のコードは、インライン ループまたは他の動的関数を使用して、透明度の値を段階的に変更できます。もちろん、最初に機能検出を通じてどのコード行を使用するかを決定する必要があります。

5. JQuery を使用して CSS の透明度を設定および変更する

jQuery を直接使用して CSS の透明度を設定するほうが、コードがすべてのブラウザで同じであり、設定されているかどうかを気にする必要がないため、より直感的で実装が簡単です。 IE の要素 "haslayout":

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->#myElement {      filter: alpha(opacity=40);  }  

この jQuery コードを使用して要素を透明にアニメーション化することもできます:

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->$("#myElement").css({ opacity: .4 }); // 所有浏览器有效

　　不管元素的透明度在动画开始时是多少，它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定，动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数，将在动画完成后执行。

　　如果该元素的透明度在CSS中已经设定为“.4”，那在动画运行的时候，你将不会发觉有任何不同，所以动画开始和最终透明度要有所不同。

6. 通过 RGBA的透明度

　　另一个CSS3技术只支持部分新的浏览器（Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+），可通过RGBA的alpha通道的方式设定。语法如下：

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->#rgba {      background: rgba(98, 135, 167, .4);  } 

　　在上面的定义中，通过RGB（前三个数字）给背景设定颜色，然后最后一个是alpha设置，以执行给定颜色的透明度。这个alpha设置跟opacity 属性一样，可设定任何0到1的数字，精确得到两位小数点。数字值越大，就越接近完全不透明的颜色。

7. 通过 HSLA的透明度

　　类似之前的定义，CSS3还允许使用HSLA单独设置颜色和alpha值，HSLA表示Hue（色调）, Saturation（饱和度）, Lightness（亮度）, 和Alpha。以下是HSLA透明的例子：

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->#hsla {      background: hsla(207, 38%, 47%, .4);  }  

　　更多关于HSLA颜色的解释，参考这篇来自W3.org的文章。如同RGBA透明度，最后的数字表示透明度设置，跟RGBA起同样的作用。注意RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的，但通过opacity属性的方式则会。alpha设置的RGBA和HSLA只影响背景颜色的透明度，仅此而已。

　　我希望我能涉及主要的跨浏览器的CSS透明度代码。如果内容有错漏，欢迎随时评论指出，我将乐意作更正或补充。谢谢~