2年 ago
1400 Views

各ブラウザ対応要素の透過度をコントロールするopacity

css

要素の透過度を指定するにはCSS3のopacityプロパティの指定でコントロールづることが可能です。透過した背景を重ねたり、マウスオーバーした際に透過する時などに使うと便利なopacity。値に使用できるのは0以上1以下の実数で、0.75と指定した場合は透過度は75%になります。このプロパティは指定した要素のテキストや画像、背景など全てが透過されます。多くの場合は、テキストや画像に関しては透過させず背景のみを透過したいと思うのもですが、opacityでは実現できないため、div要素などを追加して対応するか背景のみの透過であればRGBにアルファ値を加えたRGBaで色指定することで透過させることが可能です。

■各ブラウザ対応opacity css
.transparent_class {
/* IE 8 /
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/
IE 5-7 /
filter: alpha(opacity=50);
/
Netscape /
-moz-opacity: 0.5;
/
Safari 1.x /
-khtml-opacity: 0.5;
/
Good browsers */
opacity: 0.5;
}

Article Tags:
· ·
Article Categories:
html&CSS
12345 (No Ratings Yet)
Loading...

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Menu Title
ツールバーへスキップ