[解決済み】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)
は、黒い部分を白くします。
関連
-
[解決済み】div間の空白を削除する
-
[解決済み] リンクにアニメーションGIFを表示し、ホバーとリセットで再生する方法
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み] CSSでPNG画像の色を変える?
-
[解決済み] 背景画像にCSSフィルタを適用する方法
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】display:noneの反対語はあるのか?
-
[解決済み] "セレクタ(CSS)にIDを使うな "なら、IDの代わりに何を使えばいい?
-
[解決済み] リンクにアニメーションGIFを表示し、ホバーとリセットで再生する方法
-
[解決済み] SVGの塗りつぶし色が効かない
-
[解決済み] Railsです。railsでcssから背景画像を設定する方法は?
-
[解決済み] Bootstrapのポップオーバーの幅を変更する
-
[解決済み] マージン/パディングが機能しない
-
[解決済み] css グリッドによる垂直・水平方向の中央揃え 4x4 正方形グリッド
-
[解決済み] bootstrapのチェックボックスの色を変更するには?
-
[解決済み] ChromeでCSSが効かない