button要素内の画像をCSSでグレースケール化したい
下記のように、button要素にdisabled属性が付けられている場合だけ、内部のimg要素の画像をグレースケール化したいです。
<button disabled><img src="URL"/></button>
グレースケール化とその解除については、JavaScriptで何らかの関数を呼び出したりするのではなく、CSSでする方法を探しています。
↓こんな風に書けたら理想的です。
button[disabled] > img { /* ここでグレースケール化の記述 */ }
対象ブラウザはIE8~11、GoogleChrome(43?)です。
IE8~9なら filter: gray
、Chromeなら-webkit-filter: grayscale(1);
でいけるのですが、IE10~11ではどうにもならず困っています。
filter
要素にある、feComposite
要素は何のためのものでしょうか。<feColorMatrix type="saturate" values="0" />
だけだと何か不足がありますか?