透明度に影響を与えずにホバー時に要素の背景色を暗くする方法は?

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

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

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

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

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

CSS でオーバーレイ レイヤーを実装します。

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

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

この手法は、例に示すように複数の色であっても、任意の背景色を自動的に暗くします。 :

<div class="button"> some text </div>
<div class="button">

このオーバーレイ方法を利用することで、開発者はホバー時に要素の背景色を簡単に暗くして、ユーザーの利便性を高めることができます。暗い色合いを手動で計算する手間がかからないインタラクティブ性。

以上が透明度に影響を与えずにホバー時に要素の背景色を暗くする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。