Sass mixin使背景透明回到IE8

CSS

老丝

2020-03-23

我是Sass的新手，正在为此苦苦挣扎。我无法同时在hex（针对IE）和中渲染颜色rgba。每个小小的片段都让我感到沮丧，因为我还没有掌握语法，而Google对Sass的搜索结果仍然很少。

这是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,100,.40);

我已经忙了几个小时了：

  • 该#要求#RGB格式。
  • 在.需要RGBA阿尔法。

两者都需要包含在调用中rgba()，但是IE不能包含＃号#AARRGGBB，否则看起来像#AA#RRGGBB和。不能包含在IE中，否则会被拒绝#.AARRGGBB。

我是否错过了一种更简单的方法？可以使用Sass字符串操作或Sass中任何稍微聪明的颜色转换功能（已经为我完成此操作）完成此操作吗？

第3101篇《Sass mixin使背景透明回到IE8》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
null 2020.03.23

我想将URL传递给mixin时遇到类似的问题。我不只发送url，而是发送整个url参数作为mixin的参数。你明白我的意思吗？

例：

@mixin bg($url)
  background: #000 $url repeat-x

安装：

@mixin bg($url)
  background: #000 url($url) repeat-x

另外，这可能不适合您的应用程序，但是我通常使用不透明度解决该问题：

@mixin transparent_bg($hex, $a){
  /* for IEGR8 */
  filter:alpha(opacity=$a)
  zoom: 1;

  /* for modern browsers */
  background-color: $hex;
  opacity: ($a*10)
}
樱 2020.03.23 
@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仅在最新版本中可用，但不确定何时引入

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android