Sass 的背景不透明度无 RGBA

Posted

技术标签:

【中文标题】Sass 的背景不透明度无 RGBA【英文标题】:Background Opacity No RGBA for Sass 【发布时间】:2014-10-21 13:35:33 【问题描述】:

有没有办法在不使用 RGBA 的情况下使我的背景透明,以便我以后可以使用 Sass 变量更改颜色而不使包含的文本透明?

$dark: #000;
$highlight: blue;

nav 
    width:100%;
    background: $dark;
    opacity: .5;
    ul 
        li 
            margin: 0 3%;
            a 
                display: block;
                font-size: 1.4em;
                &:hover 
                    color:$highlight;
                
            
        
    

【问题讨论】:

【参考方案1】:

您可以使用 Sass 函数为颜色添加透明度。

background: rgba($dark, 0.5);    

background: transparentize($dark, 0.5);

background: fade-out($dark, 0.5);    

Sass 有很多方便的 functions 用于处理颜色、字符串、数字、选择器等。

【讨论】:

【参考方案2】:

不使用 rgba 没有多大意义。

IE8 不支持opacityrgba(),只支持9 及以上版本(如果需要支持的话)。除了 IE8 接受 filter 之外,这在某种程度上可以作为透明度的解决方法。

如果不是这样,并且您根本不想使用,因为将十六进制转换为 rgb 很烦人(我也觉得很烦人),不用担心! SASS 接受 HEX #000 作为 rgba 的值并正确转换它,如下所示:

$dark: #000;
background-color: rgba($dark, .5); //outputs background-color: rgba(0,0,0,.5); in this case

但无论如何,这是一种在(您选择)之后/之前使用伪元素的方法。参考cmets:

$dark: #000;
$highlight: blue;

nav 
    width:100%;
    background-color: transparent; //transparent or you won't see the color behind!

    //needs to be relative or after will go outside nav bounds
    position: relative;
    z-index: 0;

    //using after (or before) to fake the bg
    &::after  //if you need to support IE8, use single colon instead. Standard is :: but IE8 just supports with one
        content:"";
        display: block;


        //those two really could be just be
        //"background-color: rgba($dark, .5);" you know
        background: $dark; 
        opacity: .5;
        //filter here if you want IE8 support

        //making it fill entire nav
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        position: absolute;

        //behind our nav
        z-index: -1;
    
    //ul and so on here

【讨论】:

【参考方案3】:

您可以将 RGBA 与 sass 一起使用。为什么不想使用 RGBA?

background: rgba(0,0,0,0.5);

【讨论】:

以上是关于Sass 的背景不透明度无 RGBA的主要内容,如果未能解决你的问题,请参考以下文章

SASS:将 RGBa 转换回十六进制?

如何在 Rgba SASS/SCSS 中显示具有不透明度的 CurrentColor?

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

使用 rgba() 仅在背景图像上设置不透明度

带有rgba的CSS背景不透明度在IE 8中不起作用

跨浏览器 rgba 透明背景,同时保持内容(文本和图像)不透明