CSSで絵を暗くする方法

写真を暗くすると見えにくくなりますが、それがあなたが探している効果に過ぎないかもしれません。 薄暗い画像はウェブページ上で目立たなくなり、それを囲むオブジェクトよりも目立たなくなります。 たとえば、画像の下のメニューにユーザーの焦点を合わせるために、日当たりの良い海岸の写真を薄暗くすることができます。 この調光効果を生み出すために複数の画像を作成する必要はありません。 カスケードスタイルシート（CSS）は、数行のコードを使用してこのトリックを実行できます。

CSS

CSSは、サイトデザイナーがオブジェクトをWebページ上で表示する方法を定義するために使用する言語です。 色や不透明度などのこれらの属性には、次の例に示すような値があります。.redBorder {border-color：red; ボーダースタイル：実線;}

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

CSSの不透明度

CSSを使用して画像の不透明度を変更することによって、それを薄暗くします。 以下に示すコードは、40パーセントの不透明度を定義するopacity40という名前のクラスを作成します。.opacity40 {filter：alpha（opacity = 40）;}

不透明度：０．４。 }

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

プログラムによる調光

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

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

検討事項

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