线性渐变叠加在 IE 中不起作用答案

【问题标题】：Linear Gradient overlay not Working in IE线性渐变叠加在 IE 中不起作用
【发布时间】：2015-02-13 22:07:42
【问题描述】：

我正在放置背景图像并叠加渐变以使其更暗，叠加文本清晰可见。在 IE 中它不起作用，所以我使用 filter: 但这会使渐变不透明。并且背景不可见...如何解决？

.more {display:block;width:33.33%; padding:15px;padding-top:6em;background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url(http://placeimg.com/760/460/tech ) no-repeat; background-size: cover; border:2px solid white; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); text-decoration:none; color:white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#000000',GradientType=0 );     background-color: #eee;font-family: 'Fira Sans', sans-serif; width:350px;font-weight:bold; font-size:1.45em}

&lt;a class="pod more" href="/markup-html-tags-and-formatting/"&gt;Markup: HTML Tags and Formatting&lt;/a&gt;

【问题讨论】：

colorzilla.com/gradient-editor
@vsync - 选择透明颜色 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); 仍然背景在 IE 中不可见
您是否在另一个 IE 中验证了这一点？也许另一个版本？如果我没记错的话，这仅适用于 IE9 及以下版本。你在哪个 IE 版本上测试过这个？
@vsync 我使用的是 IE9

标签： html css internet-explorer

【解决方案1】：

以下样式的用户有望为您完成这项工作

过滤器：progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#000000');

查看以下链接以快速了解http://www.css3please.com/

【讨论】：

【解决方案2】：

这似乎有效...

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

链接：http://jsfiddle.net/ps7h7bf3/

【讨论】：