☰

CSS フィルター: 透明度のあるカラー画像を白にする 質問する

tag-icon • tag-icon css css-filters
CSS フィルター: 透明度のあるカラー画像を白にする 質問する

透明度のあるカラーの PNG 画像があります。CSS フィルターを使用して画像全体を白くし、透明度はそのままにしたいと思っています。CSS でそれは可能ですか?

ベストアンサー1

使用できます

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="https://i.sstatic.net/jO8jP.gif" />
</p>
<p>
  Filter:
  <img src="https://i.sstatic.net/jO8jP.gif" class="filter" />
</p>

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

そして、invert(1)黒い部分を白くします。

おすすめ記事