問題タブ [css-mask]

私は-webkit-mask-box-imagecssプロパティで遊んでいます。

これはうまくいきます。マスク画像の形をした赤い要素になってしまいます。

唯一の落とし穴は、約25種類の画像が必要なことです。25種類のマスク画像をロードすることもできますが、1つの画像だけをロードして、それをCSSスプライトのように使用して、位置を変更したりクリップしたりできれば素晴らしいと思います。

しかし、マスクプロパティを使用してそれを行うための良い方法を考えることはできません。それは実行可能ですか？

私が思いついた1つの解決策は、これに似たマークアップを使用することです。

スプライトのように背景画像を使用して配置する代わりに、DIVを使用して、それをトリミングする親div内に配置しています。これは問題ないオプションだと思いますが、まさにこれのために設計されたWebkit中心のCSSプロパティがあるかどうか疑問に思っていました。

私のモバイル デスクトップ ナビゲーション バーには、バックグラウンド ボタンがあります (デフォルト)。上に :after を使用して、ホバーすると (lt. 青) およびコンテンツ ( url(image.alpha-png) ) または -webkit-mask-image に変化する背景 (無地の灰色) を持つ要素を挿入します。

:after をサポートしていない、または -webkit-mask-image を処理できないブラウザー/デバイスで何も表示しない (= デフォルトの背景画像) 方法を探しています。

フォールバックの背景色を削除することで疑似クラスで機能するようになりました（IE 7,8を処理します）。現在、表示されないブラウザー/デバイスでグレー/ブルーの背景を表示しない方法を探しています-webkit-mask-image をサポート (またはそれらが機能しない -o/-ms/-moz-相当物)

ここにいくつかのコードがあります：

HTML:

CSS (他のすべてのブラウザーのグラデーションとマスク CSS は省略しました):

-webkit はイメージ マスクを提供する唯一のベンダーであるため、次の点についてヘルプを探しています。

• Webkit 以外のデバイスで background-gradients を非表示にする
• FF、Opera の優れた代替手段に関する情報を提供します...
• CSSスプライトの「ネガティブ」を作成する必要があることを意味する、alpha-pngのイメージマスクを切り替えることが理にかなっているのかどうかについての意見

手伝ってくれてありがとう！

プログラムでWebサーバー上にマスク画像を生成し、次のコードを使用してHTML要素に適用します。

画像がページに表示されないように、画像が戻ってきてダウンロードが終了したことを確認するにはどうすればよいですか？

私はiPadのWebビュープロジェクトに取り組んでいます。このプロジェクトでは、スライダーで2つの画像を前後に移動し、左右にスライドするとどちらか一方が表示されます。プロジェクトの制約により、jQueryを利用できません。現在、左側の画像の上に透明なマスクがあり、-webkit-mask-positionを大きくすると、下部の画像がより多く表示され、減少すると、上部（下部の画像を覆う）がより多く表示されます。

Draggy（https://github.com/jofan/Draggy）と呼ばれるjavascriptプラグインを使用してスライダーを前後に移動し、そのonChange関数呼び出しを使用してマスクの位置を更新したいのですが、できません私の命を救うためにjavascriptが「-webkit-mask-position」と呼んでいるものを理解してください。

何か案は？

PS：webkitMaskPositionはstyle = "-webkit-mask：XX"を要素に追加します。これは私が使用できます（jsの他の値を入力します）が、本当にバグがあります。今調べています。

ああ、私はそれを手に入れました。

-285は、スライダーが画像上の位置に揃うようにするためのものです。私が本当にこれを正しい方法で行っているかどうかはわかりませんが、うまくいきました。誰かがこれを行うためのより良い/より効率的な方法を考えることができるなら、私に知らせてください。

画像を使用してそれを行う方法は知っていますが、動的に変更する必要があります。画像の代わりに色を使うコツはありますか? Webkit マスクの使用に関するドキュメントはほとんどないようです。

オフラインで使用できる Chrome 拡張機能でこれを使用しています (つまり、これには PHP を使用できません)。

これはSVGがどのように見えるかです

これは、Samsum Galaxy S3 の Android 4 ネイティブ ブラウザーで SVG がどのように見えるかです。

これは、それらがページに埋め込まれている方法です

それを修正する方法はありますか？

更新: SVG

次の実装を使用して、SVG といくつかの CSS を使用して要素をマスクしています。

これは、Chrome、Safari、および Firefox で正常に機能します。ただし、いくつかのプロパティをアニメーション化することを望んでいるので、SVG を HTML にインライン化しようとしています。

これは私のインライン SVG コードです:

そして、これは私の更新された CSS です。

この実装は、どのブラウザーでも機能しません。どんな提案でも大歓迎です。

CSSを使用して、次のようなツールチップを作成しようとしています:

これは私がそれを解決しようとしている方法です: http://jsfiddle.net/NXLuZ/

だから、基本的に私はcss3マスキングを使用しています:

通常のディスプレイでは問題なく表示されますが、Retina ディスプレイで表示している場合や拡大しようとすると問題が発生することがあります。

グラデーションをマスクとして使用しているため、グラデーションで色が変わると少しぼやけて見えます。背景はその後ろに固定されていないため、丸みを帯びた角は透明にする必要があることに注意してください。

どうすればこの問題を解決できますか?

背景画像に小さなドットを作成するためにa-webkit-maskと aを使用する特別なケースがあります。radial-gradientこれらのドットの色はtransparent、背景画像がドット内に見えるようにするためのものです。

ここで、各ドットの色にグラデーションがある場合があります。

各ドットの平均色を検出し、単色を示す CSS フィルターを適用する可能性はありますか?

だから私が望むのは、青の色合いのドットがあるときです。次に、単色の青だけを表示するフィルターを適用したいと思います。

そのような場合のスクリーンショットを次に示します。

これは、ドットごとに個別の div を追加し、CSS の背景色を手動で設定することなく、CSS で可能ですか? または、WebGL をいじる必要がありますか?