在IE9中使用滤镜在背景图像上实现渐变叠加

Question

I am currently trying to create a gradient overlay on a background image loaded from a URL. I've got this working in most major browsers by using

background: linear-gradient(rgba(54, 91, 162, 0.66), rgba(78, 150, 231, 0.66)), url(<urlHere>);

Now I know that IE9 does not support CSS Gradient, but it does however support the Filter property, which allows for both Image Loading and Gradients. Now according to this StackOverflow post along with the Microsoft Developer Network you can have multiple filters by separating them with a space . So I tried to make my IE9 filter like so

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#a8365ba2', EndColorStr='#a84e96e7') progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<urlHere>');

However I cannot seem to get this to work correctly in IE9, it will always display just the Background Image without any gradient at all, even if I reverse the order of them in the filter.

I have tested the gradient filter by itself and I know that it works, I have also tested the Background Image filter by itself and can confirm it works too.

What am I doing wrong?

Answer 1

您可以使用background-image: url()和:before/:after进行渐变。