用于背景透明度的 Sass mixin 回到 IE8

Posted 2023-03-06

【中文标题】用于背景透明度的 Sass mixin 回到 IE8

【英文标题】：Sass mixin for background transparency back to IE8

【发布时间】：2011-10-17 16:37:02

【问题描述】：

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

这是混合：

@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 alpha 所需的 .。

调用rgba() 时需要包含两者，但是对于IE #AARRGGBB 不能包含#，否则它看起来像#AA#RRGGBB，而.不能包含在 IE 中，否则会拒绝 #.AARRGGBB。

我是否错过了一种更简单的方法来做到这一点？这可以通过 Sass 字符串操作或 Sass 中已经为我处理这个问题的任何稍微聪明的偏色函数来完成吗？

【参考方案1】：

当我想将 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)

【讨论】：

谢谢 - 这很有帮助。改变块级元素的不透明度实际上会淡化整个 DOM 元素及其子元素的内容，我说得对吗？我只是想调整背景不透明度。

这很脏，但你可以添加一个 div，其唯一目的是充当 BG：p

【参考方案2】：

@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 仅在最新版本中可用，但不确定何时引入

【讨论】：

这适用于 chromium-browser 14.0.835.202 和 ubuntu 11.10 下的 Firefox 8。任何人都可以确认其他浏览器吗？

@Shawn rgba 自从首次提出以来就得到了很好的支持。 IE 是阻碍网络的愚蠢浏览器，一如既往：caniuse.com/#feat=css3-colors

这太好了，谢谢！只有一件事 - 我必须在最后一行的“过滤器：”之后添加一个空格，以便 SASS 能够编译它。

ie-hex-str 是什么版本？似乎在 3.1.20 中有效。

【参考方案3】：

如果没有适当的垫片，这可能是防弹的。

以 seutje 的回答为基础，如果您在 IE 上使用 background-color，则可以使用 ms-filter 透明度，但如果您知道后面元素的颜色要使元素透明，可以使用 Sass 的“混合”功能混合两种颜色并获得假透明度 - 适用于任何颜色。这意味着边界和文本以及所有这些东西。它仍然是手动后备，但它会为您提供 exact 您尝试使用纯十六进制模拟的颜色。

SCSS：

@mixin alpha-color($foreground-color, $property: 'background-color', $background-context-color: #fff) 
    #$property: mix( 
        fade-in($foreground-color, 1), 
        $background-context-color, 
        percentage(opacity($foreground-color)) 
    ); // Browsers without color opacity
    #$property: $foreground-color; // Decent browsers
    @if $property == 'background-color' 
        .lt-ie9 &  // IE8 has background filters; use them instead
            #$property: transparent;
            $ie-hex: ie-hex-str($foreground-color);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#$ie-hex,endColorstr=#$ie-hex);
            zoom: 1;
        
    

要在蓝色背景上获得border-color: rgba(255, 0, 0, 0.5)，您可以这样使用它：

.blue-container 
    $color-bg: rgb(0,0,255);
    background-color: $color-bg;
    .transparent-red-element 
        @include alpha-color(rgba(255, 0, 0, .65), border-color, $color-bg);
    

Sass 自动将 100% 不透明度颜色转换回十六进制代码，因此 fade-in 为 100%。

唯一没有颜色不透明度的浏览器是IE8 <=8 and Opera <=9.6，而 IE 8 有过滤器，所以这只对background-color 以外的颜色有帮助。原理是将背景色和前景色混合在一起形成一个扁平的十六进制。

ie-hex-str 现在是like a year old，所以你肯定会拥有它。