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

CSSの-moz-opacityプロパティで画像の透明度を設定する方法

CSSの -moz-opacity プロパティは、画像の不透明度（透明度）を指定するために使用されます。このプロパティは主にMozilla系ブラウザ向けのもので、半透明の画像を作成する際に利用されてきました。

一方、Internet Explorerでは同じ効果を実現するために filter:alpha(opacity=x) を使用します。xには0〜100の数値を指定し、値が小さいほど画像がより透明になります。

-moz-opacityプロパティの使い方

-moz-opacityは0.0（完全に透明）から1.0（完全不透明）までの数値で透明度を指定します。以下のコード例では、画像に赤い枠線を付けながら、-moz-opacityとIE用のフィルターの両方を指定して透明度を設定しています。

<html>
   <head>
   </head>
  <body>
     <img style="border:1px solid red; -moz-opacity:0.2; filter:alpha(opacity=50);" src="https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" />
  </body>
</html>

注意点：現在の推奨される方法

-moz-opacity および filter:alpha() はいずれも非標準・非推奨のプロパティです。現在のモダンブラウザでは、CSS標準の opacity プロパティを使用するのが一般的です。opacity プロパティも0.0から1.0の範囲で値を指定でき、すべての主要ブラウザで動作します。

img {
  border: 1px solid red;
  opacity: 0.5;
}

古いブラウザへの対応が必要な場合を除き、新規の開発では標準のopacityプロパティを使うことをおすすめします。

  1. CSSのtransform-originプロパティの使い方を解説！変形の基準点を変更する方法

    transform-originプロパティとは？ CSSのtransform-originプロパティを使うと、transformで変形（回転・拡大縮小・傾斜など）される要素の基準点（原点）を自由に変更できます。 デフォルトでは要素の中央（50% 50%）が基準点に設定されていますが、このプロパティを指定することで、回転やスケール変換の起点を要素の任意の位置に移動させることが可能です。 値の指定方法は主に以下のとおりです。 キーワード： top、bottom、left、right、center など パーセンテージ： 30% 40% のように要素のサイズに対する割合で指定 長さ（px、em な

  2. CSSのtransformプロパティで要素を変形させる方法

    CSSのtransformプロパティは、要素に対して2Dまたは3Dの変形を適用するために使用されます。回転（rotate）、拡大縮小（scale）、移動（translate）、傾斜（skew）などの変換を組み合わせることで、静的なページに動きや立体感を加え、より視覚的に魅力的なデザインを実現できます。 transformプロパティの基本的な使い方 transformプロパティには、主に以下のような変換関数を指定できます。 rotate()：要素を指定した角度で回転させます scale()：要素のサイズを拡大・縮小します translate()：要素をX軸・Y軸方向に移動させます skew()