1. ホーム
  2. css

[解決済み】CSSフィルタ:透明度のあるカラー画像を白にする

2022-04-06 15:10:57

質問

透明度のあるカラーpng画像を持っています。cssのフィルターを使って、透明度を残したまま画像全体を白にしたいのですが、可能でしょうか? CSSでそれは可能でしょうか?

どのように解決するのですか?

を使用することができます。

filter: brightness(0) invert(1);

html {
  background: red;
}
p {
  float: left;
  max-width: 50%;
  text-align: center;
}
img {
  display: block;
  max-width: 100%;
}
.filter {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
<p>
  Original:
  <img src="http://i.stack.imgur.com/jO8jP.gif" />
</p>
<p>
  Filter:
  <img src="http://i.stack.imgur.com/jO8jP.gif" class="filter" />
</p>

最初に brightness(0) は、透明な部分を除いて、すべての画像を黒くし、透明な部分を残します。

次に invert(1) は、黒い部分を白くします。