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

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ベースのブラウザ向けのプロパティ
  • filter: alpha(opacity=...)：Internet Explorer 5〜9向けに不透明度のような効果を実現するフィルタープロパティ

これらを組み合わせることで、IE8以下を含むほぼすべてのWebブラウザーで画像の不透明度を表現できます。以下は、全ブラウザ対応の画像透過を行う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>Opacity example</h1>
<img src="https://i.picsum.photos/id/505/800/800.jpg" >
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" >
</body>
</html>

実行結果

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

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

この例では、1枚目の画像は通常の状態で表示され、transparentクラスを適用した2枚目の画像は30%の不透明度（70%透明）で表示されます。opacity: 0.3の値を変更することで、透過の度合いを自由に調整できます。値は0（完全に透明）から1（完全に不透明）の範囲で指定し、IE向けのfilter: alpha(opacity=30)では0〜100の数値で指定する点に注意してください。

  1. 2020年版Webデザイン必見！最新のCSSプロパティとAPI徹底解説

    JavaScriptとCSSを組み合わせてWebサイトを柔軟にカスタマイズできるよう、開発者向けに新しいCSSプロパティが多数登場し、主要ブラウザでもサポートされるようになりました。本記事では、2020年のWebデザインで注目すべき最新CSSプロパティとAPIをご紹介します。 押さえておきたい最新CSSプロパティ :focus-within 要素内のフォーカスに関するアクセシビリティ問題を解決するためのセレクタです。子要素がフォーカスを受け取った際に、親要素へスタイルを適用できます。 scroll-snap ネイティブなスクロールと減速（慣性スクロール）を実現します。カルーセルやスライド

  2. Webページ内の単語を検索する方法【Chrome・Safari・Firefox対応】

    Webページ上で特定の情報を探したいとき、ページ内検索機能を使えば一瞬で見つけられます。しかし、長いページの中から目的の単語を探し出すのは、意外と手間がかかるものです。実は、いくつかの簡単な操作を覚えておくだけで、探している言葉をすぐに見つけられるようになります。この記事では、主要なブラウザごとにWebページ内の単語を検索する方法を詳しく解説します。 Google Chrome Google ChromeでWebページ内を検索するには、Ctrl + Fキーを押します。このショートカットはすべてのブラウザ共通の基本操作であり、まさに「ゴールドスタンダード」です。以下の手順は、Microsoft