0

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

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

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

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

HTML:

<p class="test">target</p>

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

 .test    { position: relative;}
p.test:after  { width: 30px; height: 30px; position: absolute; 
                top: 0; bottom: 0; left: 0; right: 0; content: "";
                -webkit-mask-image:      url("../../../IMG/gen/testsprite.png");
                -webkit-mask-position:   -60px -15px;
                -webkit-mask-repeat:     no-repeat;
                -webkit-mask-size:       150px 45px;                    
                background-image: -webkit-linear-gradient(bottom, #ccc, #333);
              }
p.test:hover:after  {
               -webkit-linear-gradient(center top, rgba(68,213,254,.0) 0%, rgba(68,213,254,.0) 23%, #44D5FE 100%), 
               -webkit-radial-gradient(100% 320%, circle farthest-corner, #317BDC 65%, #317BDC 78%, rgba(49,123,220,.0) 80%), 
               -webkit-radial-gradient(40% 190%, circle farthest-corner, #7DAAE7 30%, #E6EEFA 90%), url("../../../IMG/gen/fallback_active.png");
              }

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

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

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

4

1 に答える 1

1

Ok。webkit のみがイメージ マスクをサポートしているため、マスキング効果を得るには、次のいずれかを使用できます

a) SVG 画像 = SVG プラグインを IE にロードする必要があります b) PNG 画像の切り抜き

背景画像からpng形状を切り取って行きました

例はこちらをご覧ください

于 2011-08-28T06:48:38.587 に答える