CSS3のfilterがIEで効かない場合について

Question

わかる方教えてください。
最終的にやりたいことは、imgタグに半透明の黒のフィルタをかけたいです。
ただし、imgタグを囲むボックスや、その:after等にrgbaを付けたりするのではなく、
imgタグそのものに何らかの記述を加えることが条件となります。

現在、imgタグに下記のようなCSSを記述し、
画像に黒いフィルタがかかるようにしています。
firefoxやChromeではCSSで効いていました。
しかし、最新版のIE11で確認すると効いていないです。
IEでも動作するようになるには、filterは使えないでしょうか。
CSSでなくても、javascript等でできるようであれば方法を教えていただきたいです。（先程記述したように、imgタグに指定するものとします。）
よろしくお願いいたします。

<img src="test.jpg">

img {
   -webkit-filter: brightness(0.7);
   -moz-filter: brightness(0.7);
   -o-filter: brightness(0.7);
   -ms-filter: brightness(0.7);
   filter: brightness(0.7);
}

Answer 1

paintbrush.js
http://mezzoblue.github.io/PaintbrushJS/demo/

<img class="filter-tint" data-pb-tint-colour="#000" data-pb-tint-opacity="0.1" src="test.jpg">

自己解決しました。すみませんm(__)m

Answer 2

IEでfilterは未対応です。
jQueryとvintageというJavaScriptのライブラリを使えば同様のことはできます。
ただ、ChromeやFirefoxとエフェクトが若干違うように思います。
filter: brightness(0.7); に一番近くなるように下記の「vintageBrightness = -44」に設定しましたが、気に入らなければ変えてください。vintageのbrightnessの最大値は255最小値は-255です。

<script src="jquery-3.1.1.min.js"></script>
<script src="jquery.vintage.min.js"></script>
<script>
function isBrowserIE() {
	return navigator.userAgent.toLowerCase().indexOf('trident') >= 0;
}


$(function() {
	if (isBrowserIE()) {
		var MAX_VINTAGE_BRIGHTNESS =  255;
		var MIN_VINTAGE_BRIGHTNESS = -255;

		var vintageBrightness = -44;

		var options = {
			onError : function() {
				throw new Error('vintage error');
			}
		};

		var effect = {
			brightness : vintageBrightness,
		};

		$('img').vintage(options, effect);
	}
});
</script>

Comments

[yukabyo]

ご回答ありがとうございます。
いただいたコードを入れてみましたところ、
IEのみでヴィンテージ風にすることができました。ありがとうございます。

しかし、var vintageBrightness = -44;　の部分が作動していないようで、
この部分の数値をどの数値に変更しても、何も変わらず、ヴィンテージ風になってしまいます。
どのように修正すれば良いでしょうか。
よろしくお願いいたします。

[yukabyo]

paintbrush.js というもので黒フィルターを掛けることができました。
色々考えてくださりどうもありがとうございましたm(__)m