CSS を使用して色の明るさを動的に調整するにはどうすればよいですか?

CSS フィルターによる動的カラー操作

質問:

動的に明るくしたり、 CSSを使用して指定した色を暗くしますか?色をパーセンテージで減らすことはできますか?

答え:

はい、CSS フィルターを使用して色をパーセンテージで減らすことができます。方法は次のとおりです:

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

この例では、ボタンの基本色は赤 (#ff0000) に設定されています。ホバー時のボタンにフィルターを適用すると、明るさが 15% 減少し、赤の色合いが暗くなります。パーセンテージを調整して、希望のレベルの明暗を実現できます。

このアプローチは、caniuse 互換性表で広く利用可能であることから明らかなように、すべての最新ブラウザと互換性があります。

以上がCSS を使用して色の明るさを動的に調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。