CSS を使用して要素の背景色を暗くする

ユーザー インターフェイスの強化には、ボタンなどのインタラクティブな要素の外観を変更して強調表示することが含まれます。一般的なアプローチは、ホバー時に背景色を暗くすることです。

最初は不透明度を調整しようとしますが、それは色と透明度の両方に影響します。よりターゲットを絞ったソリューションが存在します。

方法: ダーク レイヤーをオーバーレイする

background-image を使用してダーク オーバーレイを作成します。このメソッドは、背景を暗くしながら元のテキストの色を維持します。

CSS:

.Button {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

.Button:hover {
  background-color: /* Original background color */;
}

このテクニックは、例に示すように、複数の色を含め、あらゆる背景色を自動的に暗くします:

 some text 
このオーバーレイ メソッドを活用することで、開発者はホバー時に要素の背景色を簡単に暗くすることができ、手動で暗い色合いを計算する手間をかけずにユーザーの対話性を向上させることができます。