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

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(opacity=...)：Internet Explorer 5〜9で不透明度のような効果を実現するためのプロパティ

これらすべての値を、モダンな opacity のフォールバック（代替手段）として併用することで、あらゆるブラウザで不透明度を適用できます。

クロスブラウザ対応の不透明度サンプルコード

以下は、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>Cross browser opacity</h1>
<img src="https://i.picsum.photos/id/605/800/800.jpg" />
<img class="transparent" src="https://i.picsum.photos/id/605/800/800.jpg" />
<h3>上記の2枚目の画像は、すべてのブラウザで半透明に表示されます</h3>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

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

通常の画像と比較して、.transparent クラスを適用した2枚目の画像が薄く表示されていることが確認できます。値は 0.0（完全に透明）から 1.0（完全に不透明）の範囲で指定し、IE向けの filter では 30 のようにパーセンテージで指定する点に注意してください。

  1. CSSで角度を指定して線形グラデーションの方向を自在に設定する方法

    CSSのlinear-gradient()関数では、キーワード（to rightなど）だけでなく角度を指定することで、グラデーションの方向をより細かく制御できます。基本構文background-image: linear-gradient(角度, カラー1, カラー2);角度はdeg（度数法）で指定します。主な角度と方向の対応は以下の通りです。0deg：下から上へ（to topと同じ）90deg：左から右へ（to rightと同じ）180deg：上から下へ（to bottomと同じ・初期値）-90deg：右から左へ（to leftと同じ）サンプルコード以下は、CSSで角度を使って線形グラデーシ

  2. すべてのブラウザに対応する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以降の旧バ