CSSで画像を暗くする方法

写真を暗くすると見づらくなりますが、それはあなたが探している効果かもしれません。薄暗い画像は、Webページ上で目立たなくなり、周囲のオブジェクトよりも注意を引きません。たとえば、太陽が降り注ぐビーチの写真を暗くして、画像の下のメニューにユーザーの焦点を合わせることができます。この調光効果を生み出すために複数の画像を作成する必要はありません。カスケードスタイルシート(CSS)は、数行のコードを使用してこのトリックを実行できます。

CSS

CSSは、サイト設計者がWebページでのオブジェクトの外観を定義するために使用する言語です。色や不透明度などのこれらの属性には、次の例に示すような値があります。.redBorder{border-color:red; border-style:solid;}

このコードは、redBorderという名前のCSSクラスを作成します。HTML imgタグの1つがこのクラスを参照している場合、サイトの訪問者は、Webページで画像を表示すると、画像の周囲に赤い実線の境界線が表示されます。このクラスを参照するHTMLコードは次のようになり、このimgタグのクラス参照を削除することで赤い境界線を削除できます。

CSSの不透明度

CSSを使用して画像の不透明度を変更すると、画像が暗くなります。以下に示すコードは、40パーセントの不透明度値を定義するopacity40という名前のクラスを作成します。.opacity40{filter:alpha(opacity = 40);

不透明度:0.4; }

クラスのフィルター属性は0〜100の不透明度スケールを使用し、その不透明度属性は0〜1の範囲の値の不透明度スケールを持ちます。両方の属性を使用すると、すべてのブラウザーで画像の不透明度を変更できます。このクラス参照を画像に追加して、画像を暗くします。「opacity100」という名前のクラスを作成し、画像の不透明度が100%になるようにその値を設定することもできます。そのクラスは画像を不透明にします。

プログラムによる調光

ユーザーがページを開いたときにウェブページに画像が暗く表示されたり、コードによってページが読み込まれた後に画像が暗くなったりすることがあります。最初に画像を暗くするには、前述のように、不透明度を低い値に設定します。アプリケーションの実行中に画像を暗くするには、次の例に示すように、画像の不透明度を定義するクラスの名前を変更します。varimageObject = document.getElementById( "image1"); imageObject.className = "opacity40";

このコードはJavaScript関数内に表示され、画像への参照を取得し、そのクラス名を「opacity40」に変更します。ユーザーはJavaScript関数を実行するボタンをクリックするか、コードでいつでも呼び出すことができます。

考慮事項

JavaScript関数では、不透明度を動的に変更する場合、暗くしたい画像のid値が必要です。前述の例の画像IDは「image1」です。暗くする画像が複数ある場合は、それらに一意のID値を指定して、不透明度の変更を実行する関数に渡します。さまざまな不透明度を定義するCSSクラスを好きなだけ作成します。次に、JavaScript関数でクラス参照を変更することにより、画像を任意の程度に暗くすることができます。