CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

すべてのブラウザに対応するCSS不透明度（opacity）の設定方法

CSSのopacity（不透明度）プロパティは現在の標準的なソリューションであり、Firefox 0.9以降、Safari 2、Opera 9以降、Internet Explorer 9以降、そしてすべてのバージョンのChromeで動作します。しかし、さらに古いブラウザにも対応させるには、各ブラウザ固有のプロパティをフォールバックとして併用する必要があります。

ブラウザ別の不透明度プロパティ

  • opacity — モダンブラウザ向けの標準プロパティ（値は0〜1で指定）
  • -moz-opacity — Firefox 0.9より前のバージョン向け
  • -khtml-opacity — Safari 1以降の旧バージョン向け
  • filter: alpha(opacity=...) — Internet Explorer 5〜9向けの不透明度風エフェクト（値は0〜100で指定）

これらの値をすべて組み合わせて記述することで、どのブラウザでも一貫した半透明表現を実現できます。以下は、すべてのブラウザで動作する画像の不透明度をCSSで実装するコード例です。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
img {
   width: 270px;
   height: 200px;
}
.transparent {
   filter: alpha(opacity=30);
   -moz-opacity: 0.3;
   -khtml-opacity: 0.3;
   opacity: 0.3;
}
</style>
</head>
<body>
<h1>すべてのブラウザ対応の不透明度</h1>
<img src="https://i.picsum.photos/id/305/800/800.jpg" />
<img class="transparent" src="https://i.picsum.photos/id/305/800/800.jpg" />
<h3>上記の2番目の画像は、すべてのブラウザで半透明に表示されます</h3>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。1枚目の画像は通常通り表示され、.transparentクラスを適用した2枚目の画像だけが30%の不透明度（70%透過）で半透明に表示されます。

すべてのブラウザに対応するCSS不透明度（opacity）の設定方法

ポイント解説

opacity: 0.3のように標準プロパティでは0〜1の範囲で指定するのに対し、IE向けのfilter: alpha(opacity=30)では0〜100の範囲で指定する点に注意してください。上記の例ではどちらも「30%の不透明度」を意味しており、宣言の順序によって新しいブラウザでは標準のopacityが最終的に採用されます。なお、これらのレガシーなベンダープロパティは現在ではほぼ不要ですが、古いブラウザのサポートが必要な場合に有効なテクニックです。

  1. CSSを使ったクロスブラウザ対応の不透明度（opacity）設定方法

    Webページで要素や画像を半透明にしたい場合、opacity プロパティが現代の標準的な解決策です。このプロパティは、Firefox 0.9以降、Safari 2、Opera 9以降、Internet Explorer 9以降、そしてすべてのバージョンのChromeで動作します。 しかし、古いブラウザにも対応させるには、以下のレガシーなプロパティを組み合わせる必要があります。 -moz-opacity：Firefox 0.9より前のバージョン向けの不透明度プロパティ -khtml-opacity：Safari バージョン1以降向けの不透明度プロパティ filter: alpha(opacit

  2. IE8以下を含むすべてのブラウザに対応したCSS画像の不透明度設定方法

    画像に半透明効果を加えたい場合、CSSのopacityプロパティが最も標準的でモダンな解決策です。このプロパティは、Firefox 0.9以降、Safari 2以降、Opera 9以降、Internet Explorer 9以降、そしてすべてのバージョンのGoogle Chromeで動作します。 ただし、古いブラウザにも対応させるには、以下の互換用プロパティを併せて指定する必要があります。 -moz-opacity：Firefox 0.9より前の古いバージョン向けの不透明度プロパティ -khtml-opacity：Safari 1系など旧WebKitベースのブラウザ向けのプロパティ filt