背景不透明沒有RGBA爲Sass

有沒有辦法使我的背景透明，而不使用RGBA，以便我可以更改後使用Sass變量的顏色，而不使包含的文本透明？背景不透明沒有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; 
       } 
      } 
     } 
    } 
}

來源

2014-08-27 noelietrex

製作一個「dummy」'nav'，其中一個位於帶有內容的'nav'後面。然後，您可以更改虛擬模式的不透明度以實現透明度，並保留內容的不透明度。 – Charlie 2014-08-27 20:11:50

@Charlie這就是我雖然也:)。但不是額外的標記（第二個'nav'或者其他東西），你可以使用'before/after'來實現它。 – RaphaelDDL 2014-08-27 20:50:04

您可以使用Sass函數爲顏色添加透明度。

background: rgba($dark, 0.5);

或

background: transparentize($dark, 0.5);

或

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

薩斯有很多的方便functions操縱色彩，字符串，數字，選擇，以及更多。

來源

2014-08-27 20:39:31 chriserwin

這些工作非常漂亮！非常感謝信息。 – noelietrex 2014-08-27 21:10:05

@chriserwin背景：rgba（$ dark，0.1）不起作用。 – Naresh 2017-04-19 09:00:11

@電子設計請注意，您需要爲這些示例工作而聲明變量$ dark：示例：'$ dark：＃000;背景：rgba（$ dark，0.1）;' – chriserwin 2017-04-19 13:58:04

-1

你可以使用RGBA與頂嘴。你爲什麼不想使用RGBA？

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

來源

2014-08-27 20:19:07

對不使用rgba沒什麼意義。

IE8不支持opacity和rgba()，只有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

但不管怎麼說，這裏是僞元素的方法後/前（選擇）。請參閱評論：

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

來源

2014-08-27 20:30:16 RaphaelDDL

背景不透明沒有RGBA爲Sass

回答

相關問題