新しい 16 進コードを見つけずに、ホバー時に要素の背景を暗くするにはどうすればよいですか?

CSS を使用して要素の背景色を強化する: より簡単なアプローチ

ホバー時に要素の背景色をわずかに暗くしたい場合、開発者は多くの場合、より暗い 16 進コードを苦労して見つけます。元の色に合わせます。ただし、半透明のオーバーレイを利用する 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% の不透明な黒のレイヤーで重ねる線形グラデーションを特徴としています。その結果、さまざまな背景色にシームレスに適応する、上品で微妙に暗い背景効果が得られます。

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

以上が新しい 16 進コードを見つけずに、ホバー時に要素の背景を暗くするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。