html - 使用 LESS 使 RGBa 浏览器支持 IE8 的最优雅方式

Question

我使用 less 是为了使背景颜色透明的 div 。

这是我的代码，它不适用于 IE8：

background-color: fade(@mycolor, @transparency);

我的问题是：
什么是最好的方法，因为我使用较少，以在 IE8 上获得相同的效果？

Answer 1

我不知道 LESS，但是您可以通过使用 MS 渐变滤镜并设置与开始和结束相同的颜色在 IE 7+8 中实现 alpha 透明度。alpha 通道是前两个十六进制数字，RGB 如下：

/* ARGB backgrounds for IE 7+8 (white background with nearly 90% transparancy) */
section {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
}

Answer 2

您可以为过滤器功能制作一个mixin

// 重置IE 的mixin过滤器

.horizontal(@startColor: #555, @endColor: #333) {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
  background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}

.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.reset-filter() {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}