3

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ではどうにもならず困っています。

2
  • 1
    英語版のS/Oで同じ質問がありました。stackoverflow.com/questions/14813142/… 実際の例 jsfiddle.net/KatieK/qhU7d/2 Commented 2015年6月19日 0:12
  • ありがとうございます。ちょっと分からなかったのですが、SVGのfilter要素にある、feComposite要素は何のためのものでしょうか。<feColorMatrix type="saturate" values="0" />だけだと何か不足がありますか?
    – mok2pok
    Commented 2015年6月19日 1:44

1 件の回答 1

1

Kenji Noguchiさんのコメントを参考に、IE8~11とChromeで動作するものができましたので、回答として載せておきます。

$('#toggle').click(function() {
  $('#target').prop('disabled', function(i, d) {
    return !d;
  });
});
#grayscale-filter {
  display: none;
}

button>.button-image {
  width: 100px;
  height: 40px;
}

button>.button-image>img {
  width: 100%;
}

button[disabled]>.button-image>img {
  filter: gray;
  -webkit-filter: grayscale(1);
}

button>.grayscale-ie10p {
  display: none;
}

button>.grayscale-ie10p>svg {
  position: relative;
  top: -2px;
}

@media all and (-ms-high-contrast:none) {
  button[disabled]>.grayscale-ie10p {
    display: block;
  }
  button[disabled]>.grayscale-other {
    display: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" id="grayscale-filter">
    <defs>
        <filter id="filtersPicture">
            <feColorMatrix type="saturate" values="0" />
        </filter>
    </defs>
</svg>

<button id="toggle">toggle disabled</button>
<br/>
<br/>

<button id="target">
    <div class="button-image grayscale-other">
        <img src="http://www.google.co.jp/images/srpr/logo11w.png" />
    </div>
    <div class="button-image grayscale-ie10p">
        <svg xmlns="http://www.w3.org/2000/svg">
          <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.google.co.jp/images/srpr/logo11w.png" />
        </svg>
    </div>
</button>

http://jsfiddle.net/Lshr07sk/2/

※IE8だとjsfiddle見れないですが・・・

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。