Question

有没有办法让我的背景透明而不使用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;
                }
            }
        }
    }
}

Answer 1

您可以使用Sass功能为颜色添加透明度。

background: rgba($dark, 0.5);

或

background: transparentize($dark, 0.5);

或

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

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

Answer 2

不使用rgba没什么意义。

IE8不支持opacity和rgba()，只有9及以上（如果您需要支持它）。除了IE8接受filter之外，这可能是透明度的一种解决方法。

如果不是这样的话，而你根本不想使用，因为将hex转换为rgb很烦人（我觉得这很烦人），不用担心！ SASS接受HEX #000作为rgba的值并正确转换，如下所示：

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

但无论如何，这是一种使用伪元素之后/之前（你选择）的方法。请参阅评论：

$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
}

Answer 3

你可以使用RGBA和sass。你为什么不想使用RGBA？

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

背景不透明度没有RGBA for Sass

3 个答案: