☰

パーセンテージで色を明るくしたり暗くしたりする CSS 質問する

tag-icon • tag-icon css colors
パーセンテージで色を明るくしたり暗くしたりする CSS 質問する

当サイトには大きなアプリケーションがあり、このサイトの青いリンクのように青色のリンクがいくつかあります。次に、他のリンクをいくつか作成しますが、色はもっと明るい色にします。もちろん、CSS ファイルに 16 進コードを追加するだけで簡単にできますが、当サイトでは、ユーザーがカスタマイズしたプロフィール/サイト (Twitter など) に使用する色を決定できます。

そこで質問なのですが、色をパーセンテージで減らすことはできるのでしょうか？

次のコードが CSS だとします。

a {
  color: blue;
}
    
a.lighter {
  color: -50%; /* obviously not correct way, but just an idea */
}

または

a.lighter {
  color: blue -50%;  /* again not correct, but another example of setting color and then reducing it */
}

色を一定の割合で減らす方法はありますか?

ベストアンサー1

これは次のように行うことができますCSS フィルターすべての最新ブラウザで（caniuse 互換性テーブル）。

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}
<button class="button">Foo lorem ipsum</button>

使用できるさまざまなフィルターについては、CSS Tricks の以下の資料を参照してください。https://css-tricks.com/almanac/properties/f/filter/

おすすめ記事