17

グレースケールからカラーへの移行に問題があります。クロムで動作しますが、それだけです。

HTMLは次のとおりです。

<div id="post" style="background-image:url('bg.png');background-repeat:no-repeat;">
    <p><a href="/post.php?id=1">Title - Date</a></p>
</div>

CSSは次のとおりです。

#post{
    padding:0;
    margin:0 auto;
    margin-bottom:25px;
    border:solid 1px #000;
    height:150px;
    width:750px;
    display:block;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale");
    filter: gray alpha(opacity=50);
    -webkit-filter: grayscale(50%);
    -webkit-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    transition: 0.3s all ease;
    -webkit-backface-visibility: hidden;
}

#post:hover{
    filter: none;
    -webkit-filter: grayscale(0%);
}

ご協力ありがとうございます。

4

2 に答える 2

1

Firefox 35 以降で動作filter: grayscale(100%);するはずです。

参照: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility

于 2015-01-25T20:41:50.890 に答える