Question

我使用较少的东西来制作背景颜色透明的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

您可以为过滤功能制作混音

//重置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)"));
}

使用LESS为IE8制作RGBa浏览器支持的最优雅方式

2 个答案: