CSS を使用して色を動的に明るくしたり暗くしたりするにはどうすればよいですか?

CSS パーセンテージを使用して色を動的に明るくまたは暗くします

Web 開発では、ユーザー インターフェイスを色でカスタマイズすることが重要です。場合によっては、ユーザーの好みや特定の条件に基づいて要素の色を動的に調整する必要があるかもしれません。ただし、ユーザーがカスタマイズされた配色を必要とする場合、静的な 16 進コードは制限となる可能性があります。

CSS フィルターの使用

最新のブラウザーは、CSS フィルターを使用したソリューションを提供します。これらのフィルターを使用すると、要素の明るさのパーセンテージを調整して要素の色を変更できます。これにより、色相を変えずに色を明るくしたり暗くしたりできます。

明るさフィルターを適用するには、次の構文を使用します:

filter: brightness(percentage);

たとえば、色を 50% 明るくするには

filter: brightness(50%);

色を 15% 暗くするには、 use:

filter: brightness(85%);

効果を示す例は次のとおりです:

.button {
  color: #ff0000;
}

.button:hover {
  filter: brightness(85%);
}

<button class="button">Foo lorem ipsum</button>

この例では、「ボタン」クラスに赤色が含まれています。ボタンの上にマウスを置くと、「button:hover」クラスによって 85% の明るさフィルターが適用され、赤色がわずかに暗くなります。

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