6

私はまだCSSのリフレクションなどに慣れていないので、これに問題があります。ホームページの場合、テキストを反映してから画像を反映する必要があると言われました（背後に複雑な影がありますが、それは私のやることリストにあります）。

chrome/safari (webkit) の場合、私は持っています

-webkit-box-reflect: 0px 未満 -webkit-gradient(linear, 左上, 左下, from(透明), color-stop(70%, 透明), to(rgba(255,255,255,0.2)));

とても素敵に見えます...しかし...明らかにクロム/サファリでしか動作しません。Internet Explorer (可能であれば 7/8/9) と Firefox で同じ効果を得るにはどうすればよいですか?

ありがとう、ニコラス・カーター

4

2 に答える 2

4

-moz-elementFirefoxの属性を使用する必要があります。

リフレクションの場合、次のようになります。

#reflection {
  /* It's a copy of the original element... */
  background: -moz-element(#reflected-element)
              bottom left no-repeat;

  /* ... turned upside down ... */
  -moz-transform: scaleY(-1);

  /* ... with a gradual fade-out effect towards the bottom. */
  mask: url(#reflection-mask);
}

-moz-elementとは？

参照

于 2012-09-22T16:34:21.943 に答える
2

このプラグインで jQuery フォールバックを提供できるかもしれません。

このチュートリアルでは、クロスブラウザー リフレクションについても説明しています。

リフレクションをサポートしていないブラウザーをターゲットにするには、Modernizrを使用できます。

このビルド: http://modernizr.com/download/#-cssreflections-cssclasses-testprop-testallprops-domprefixesは、ページタグno-cssreflectionsにクラスを追加します。<html>

次に、特定の CSS ルールを追加できます。

.no-cssreflections #element-id {
    /* custom CSS rule */
}

または JavaScript 経由:

if(!Modernizr.cssreflections){
    /* run plugin or whatever */
}
于 2012-09-22T16:31:30.743 に答える