私はたくさんググって、あきらめたばかりなので、誰かが私の探求で私を助けることができるかどうか見るためにそこにいる専門家に頼ります。
イラストレーターでロゴを.SVGに変換しました。
私の目的は、そのロゴを使用してdiv全体をクリップ（または必要に応じてマスク）して、その一部だけが透けて背景が見えるようにすることです。
このWebサイトを完全にスケーラブルなエクスペリエンスとして作成したいので、.SVGを使用することにしました。したがって、.pngはフルHD解像度から1024x768まで正確に機能しません。
したがって、最初にDivをクリップする方法と、同時に「逆クリップ」する方法を知りたいので、divのその部分だけを表示するのではなく、それ以外のすべてを表示します。
私は本当にそれらを必要としているので、私はあなたの答えを熱心に待っています...
前もって感謝します。
私はあなたがそれをすることができるだろうとは思わない。私はかつてこのようなプラグインとジェネレーターを見たことがありますが、それはおそらくあなたの最善の策ではないと思います。
クリップしたいテキストをsvgに組み込みます。これは、htmlがsvgと適切に相互作用する方法を見つけるよりも簡単だと確信しています。
私があなたを正しく理解しているなら（そしてそれについてはよくわかりませんが）、あなたは「あなたのロゴの形に合う背景のすべて」を見せたいのですが、それは正しいですか？ただし、ロゴを「反転」して、ロゴ自体を透明にし、背景に黒や白などの中間色を与えるのはどうでしょうか。次に、2つのdivを互いに配置し、上部をロゴにします。
私が意味することを示すためにフィドルを作成しました：http： //jsfiddle.net/ds82/R4rBH/2/
Derサークルはロゴで、青い線の内側と外側が透明で、svgです。それがあなたが望むものであることを願っています。
.svgでそれを行うことができなかったので、すべてが黒でロゴが透明な.pngを使用することになりました。でも答えが見つからなかったのはちょっと悲しい…
基本的に、あなたがやりたいことは、現時点ではFirefoxでのみ機能します。方法は、SVGで正しい<mask>要素を定義し、CSSを介してそれを適用することです。
#content {
mask: url(remote.svg#logo-mask);
}
（または、SVGを埋め込んだ場合:)
#content {
mask: url(#logo-mask);
}