Question

我正在尝试使我的网站浏览器与图像悬停上的过渡灰色渐变兼容，并且它可以在Chrome和Opera中使用，但不能在Firefox中使用，我不知道为什么，因为我有针对Mozilla浏览器的浏览器特定代码。

这是我的代码（虽然您要查看的主要代码是img和img：在CSS中悬停）：

<!doctype html>

<html>
<head>
    <title>Basketball Uniforms 1/24/14</title>
    <style>
        * {
            margin: 0;
            font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
        }

        html { 
            background: url(assets/background.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        header {
            width: cover;

            padding: 2em;

            background-color: rgba(17, 40, 87, 0.85);

            border-radius: 0 0 2em 2em;
        }

        h1 {
            text-align: center;
            vertical-align: middle;

            color: #FFBB00;
        }

        h2 {
            text-align: center;
            vertical-align: middle;

            color: #FFBB00;
        }

        h3 {
            text-align: center;
            vertical-align: middle;

            color: #FFBB00;
        }

        table {
            margin-left: auto;
            margin-right: auto;

            border-collapse: separate;
            border-spacing: 0 2em;
        }

        td {            
            border-style: groove;
            border-width: 2em;
            border-color: rgba(59, 59, 59, 0.95);
            border-radius: 4em;

            padding: 4em;
        }

        .odd {
            background-color: rgba(242, 153, 51, 0.80);
            color: #22499C;
        }

        .even {
            background-color: rgba(51, 112, 242, 0.80);
            color: #FEBB2D;
        }

        img {
            width: 26em;
            height: 20em;

            border-radius: 1em;

            transition: filter 1.5s ease;
            -ms-transition: -ms-filter 1.5s ease;
            -o-transition: -o-filter 1.5s ease;
            -webkit-transition: -webkit-filter 1.5s ease;
            -moz-transition: -moz-filter 1.5s ease;
        }

        img:hover {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: url(assets/grayscale.svg);
            filter: gray;
        }

        h4 {
            padding-top: 1em;

            text-align: center;
        }

        h5 {
            text-align: center;
        }

        footer {
            width: cover;

            padding: 2em;

            background-color: rgba(17, 40, 87, 0.85);

            border-radius: 2em 2em 0 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>Basketball Uniforms Through the Ages</h1>
        <h2>Leo Alfred&#58; 1/24/2013</h2>
    </header>

    <table>
        <tr>
            <td class="odd">
                <a href="http://uniformcritics.com/basketball/nba/portland-trail-blazers/1970-trail-blazers-debut-road-uniform-vintage-retro-throwback/">
                    <img src="assets/1970.jpg" title="1970&#39;s Basketball" alt="1970&#39;s Basketball">
                </a>

                <h4>Portland Trail Blazers</h4>
                <h5>1970 - 1971 Debut Road Uniform</h5>
            </td>
        </tr>
        <tr>
            <td class="even">
                <a href="http://uniformcritics.com/basketball/nba/golden-state-warriors/1980s-warriors-away-california-uniform-vintage-retro-throwback/">
                    <img src="assets/1980.jpg" title="1980&#39;s Basketball" alt="1980&#39;s Basketball">
                </a>

                <h4>Golden State Warriors</h4>
                <h5>1980 - 1985 Road Uniform</h5>
            </td>
        </tr>
        <tr>
            <td class="odd">
                <a href="http://uniformcritics.com/basketball/nba/milwaukee-bucks/1990s-bucks-road-uniform-throwback/">
                    <img src="assets/1990.jpg" title="1990&#39;s Basketball" alt="1990&#39;s Basketball">
                </a>

                <h4>Milwaukee Bucks</h4>
                <h5>1993 - 2005 Road Uniform</h5>
            </td>
        </tr>
        <tr>
            <td class="even">
                <a href="http://uniformcritics.com/basketball/nba/la-clippers/2000s-clippers-away-uniform-red/">
                    <img src="assets/2000.jpg" title="2000&#39;s Basketball" alt="2000&#39;s Basketball">
                </a>

                <h4>LA Clippers</h4>
                <h5>2000 - 2009 Away Uniform</h5>
            </td>
        </tr>
        <tr>
            <td class="odd">
                <a href="http://www.spartanjerseys.com/michigan-state-basketball-jersey/2010-2011/">
                    <img src="assets/2010.jpg" title="2010&#39;s Basketball" alt="2010&#39;s Basketball">
                </a>

                <h4>Michigan State Spartans</h4>
                <h5>2010-2011 Uniform</h5>
            </td>
        </tr>
    </table>
    <footer>
        <h2>An LFX Design Website</h2>
        <h3>&#169; 2014 LFX Design</h3>
    </footer>
</body>

我不知道发生了什么，因为我有：

-moz-transition: -moz-filter 1.5s ease;

和：

-moz-filter: grayscale(100%);

提前感谢您的帮助！

Answer 1

尝试使用此样式：

img:hover {
  -webkit-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");

}

Answer 2

Firefox（或Gecko）目前不支持CSS过滤器，如模糊，灰度等。

这是一个很棒的网站，列出了所有浏览器中CSS过滤器的历史记录和当前支持，因此您可以在将其添加到网站之前使用它来查看您正在查看的浏览器支持。

http://caniuse.com/css-filters

这是关于Mozilla支持的帖子，人们已经问过同样的问题，Firefox何时支持CSS过滤器：http://support.mozilla.org/en-US/questions/972373

希望有所帮助！

Firefox没有使用转换

2 个答案: