CSS を使用してより効率的な方法で背景を微妙に暗くするにはどうすればよいでしょうか?

微妙な背景の暗さ: CSS のジレンマ

CSS を使用してボタン スタイルをカスタマイズする場合、強調するためにホバー時に背景色を変更したいと思うのが一般的です。暗い色合いを手動で指定するのは面倒な場合があります。より効率的な解決策は次のとおりです。

レイヤー化に背景画像を利用する

背景色のプロパティを直接調整する代わりに、次を使用してボタンの上に微妙なレイヤーを作成します。背景画像。この手法では、背景を微妙に変更しながらテキストの可視性を維持します。

コード例:

.button {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
}

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

この例では、不透明度 40% の線形グラデーションが適用されます。ホバーされた要素。グラデーションの色と不透明度をカスタマイズして、目的の暗くする効果を実現します。

この方法には柔軟性があり、特定の 16 進値を指定せずに背景色を暗くすることができます。さらに、テキストの色が変更されないことが保証され、一貫したユーザー エクスペリエンスが提供されます。

以上がCSS を使用してより効率的な方法で背景を微妙に暗くするにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。