0

私はhtmlとcss/jqueryが初めてです。それでも、chrome の inspect 要素やその他のソースを使用して、自分で Web サイトを作成することができました。しかし、不透明度フィルターはFirefoxで機能していません（使用しているFirefoxのバージョンは20.0.1です）。「myHobbie」セクションでは、すべての画像で不透明度 ( -webkit-filter:opacity = 50%) が使用されていますが、firefox に関しては、webkit がサポートされていないことがわかりました。

FirefoxとChromeの両方で機能するように、これに代わる他の方法を教えてください。また、可能であればIEでも。

私のウェブサイトの URL は次のとおりです。www.srikarshastry.com/index_vertical.html

前もって感謝します。

4

5 に答える 5

1

そもそもあなたが間違っているのは

-webkit-filter:opacity=50%

Chrome Safari などのWebkitエンジンを搭載したブラウザでのみ使用します。あなたの場合、mozilla firefox はgeckoである別のエンジンを使用しています。gecko の場合、不透明度を次のように設定する必要があります。

-moz-opacity:0.5;

また

opacity: 0.5;

すべてのブラウザの透明度設定を以下に示します。

.transparent {

    /* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;
}

このリンクを参照できる詳細

于 2013-04-22T05:58:49.550 に答える
0

皆さん、ありがとうございました。それはついに働いた。ホバー効果がめちゃくちゃでした。だから、私は変更を加えました：

/*Hover effects*/
 #gallery a img:hover {
 filter: alpha(opacity=100);
 opacity: 100;
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
-webkit-filter: brightness(0);
brightness: 0;
    -moz-brightness:0;
filter: alpha(opacity=100);
opacity: 100;
}
于 2013-04-22T16:21:53.860 に答える
0

これを試して

  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Firefox */
  -moz-opacity: 0.5;

  -webkit-opacity: 0.5; /* Chrome & Safari */

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
于 2013-04-22T05:54:53.127 に答える