画像の白い背景をCSSで透明にします

2つの画像があり、そのうちの1つは最初の画像に重ねて表示される小さなアイコンです。私のアイコンは白い背景を持っているので、アイコンが他の画像の上に置かれたときに、画像の上に白い四角が現れるところでこの効果が得られます。理想的には、この白い背景を他の画像の上に表示したくありません。白い背景を透明にするためにアイコンに適用できるCSSプロパティがありますか？画像の白い背景をCSSで透明にします

出典

2012-09-30 Nick

Photoshopのようなツールでアイコンの背景を透明にすることができます。 – Kedume

CSSで必要なことをすることはできません。以前のコメント作成者によると、画像編集ツールを使用する必要があります。 – depa

-6

最も良い方法は、PhotoshopやPaint.Netのようなソフトウェアを使用することです。

私はPaint.Netをお勧めします。 Paint.Netの白い背景を削除し、imgを.pngとして保存する必要があります。

出典

2012-09-30 16:23:37 Devaffair

OPはCSSでそれをするように求めました。可能な答えが「いいえ」でない場合は – Paolo

ここで@Paoloと合意すると、この質問に答えられませんでした。 –

このような回答は、質問を完全に回避して全く別のものに答えるだけで、本当に迷惑をかけることになります。たとえば、外部ソースから株価グラフをホットリンクしているとします。毎分paint.netにファイルをコピーして変更することはできませんか？ –

第まだ...

それものの、可能性に非常に近くなってISS。経験豊富なCSS機能であるCSS Filtersについてのこの記事をチェックしてください。これは、クライアントサイドできちんとしたことをしています。

CSS Filters

出典

2014-11-14 16:23:53

FirefoxではCSSフィルタがデフォルトでオンになっています。 –

実際には、現在のクロム、Firefox、およびSafariでサポートされるが、方法があります。背景色が白である場合、あなたはCSSプロパティを追加することができます

mix-blend-mode: multiply;

をあなたはここでそれについての詳細を読むことができます：https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

出典

2015-12-15 19:41:28 user1822264

うわー、これも可能だと思ったよ、ニース!!! – dreamweiver

魔法のように動作します！素晴らしい答え！ –

しかし、この手法はIEブラウザでは機能しませんでした。 –

mix-blend-modeは、いくつかのブラウザのための作業を行いますが、我々はそれがパフォーマンスを引き起こすことを発見しましたクロムの問題、私は理由が分かりません。

はです。この天才ハックは、ほとんど透明ですが、白い背景の上に置かれたとき、その色は周囲の背景の色と一致します。

誰かがそれが公開されたところ、私はコメント

この「魔法」の色が発見された方法で教えてください知っている場合、我々は、ハックを見つけた私は覚えていない。除去された不透明度の量に対する各色軸の濃さを計算することです。これの式は255 - (255 - x)/opacityです。問題は次のとおりです。不透明度を低く設定しすぎると、数式には負の数が使用されます（使用できません）。不透明度が高すぎると、画像の白以外の部分に色付けができます。
当初は計算を行うスプレッドシートを使用していましたが、手作業で試行錯誤してGoldiloxカラーを見つけることができました。
私たちがsassを使い始めたら、これはバイナリ検索で実現できることに気付きました。だから私は私たちのために仕事をする盛り沢山の機能を作りました。

sassmeisterでthis gistをチェックしてください。あなたの背景色を、sass-codeの56行目のopacitator関数に渡してください。 div（または擬似要素）で生成されたrgbaカラーを使用してイメージをオーバーレイします。

出典

2016-09-08 16:38:17 dovidweisz

画像にコンテナを作ることができます。次に、コンテナのCSSの場合：

overflow:hidden; height: (depends on your image, then make it a smaller px); width:100%;

希望します。 :)

出典

2017-06-15 02:43:44 DrawdeX

画像の白い背景をCSSで透明にします

答えて

関連する問題