css – Sass mixin背景透明度返回IE8

前端之家收集整理的这篇文章主要介绍了css – Sass mixin背景透明度返回IE8前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是Sass的新手,并且挣扎着。我无法获得在十六进制(对于IE)和rgba中渲染的颜色。每个小件都令我很沮丧,因为我还没有掌握语法,而Sass的Google结果仍然很少。

这是mixin:

@mixin transparent($hex,$a){
    /* for IEGR8 */
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$a}#{$hex},endColorstr=#{$a}#{$hex});
    zoom: 1;
    /* for modern browsers */
    background-color: rgba(#{$hex},.#{$a});
}

这样@include transparent(#FFF,.4)应该产生一个漂亮的,浏览器兼容的透明代码如下:

background: transparent;         
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#40FFFFFF,endColorstr=#40FFFFFF);
zoom: 1;
background-color: rgba(100,100,.40);

我一直在下列几个小时,

> #RGB格式需要#。
>那个。需要rgba alpha。

这两个都需要包含在调用rgba()中,但是##不能包含在#AARRGGBB中,或者看起来像#A#RRGGBB。不能包含IE或它拒绝#.AARRGGBB。

我错过了一个更简单的方法吗?这可以通过Sass字符串操作或Sass中任何稍微聪明的色彩转换功能来完成,这对我来说已经处理了吗?

Muchas格拉西亚。

解决方法

@mixin transparent($color,$alpha) {
  $rgba: rgba($color,$alpha);
  $ie-hex-str: ie-hex-str($rgba);
  background-color: transparent;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
  zoom: 1;
}

注意:ie-hex-str仅在最新版本中可用,不知道何时被引入

猜你在找的CSS相关文章