薩斯 - 轉換十六進制的RGBA背景不透明度

128

我有以下薩斯混入，這是一個的RGBA例子的完成了一半修改：薩斯 - 轉換十六進制的RGBA背景不透明度

@mixin background-opacity($color, $opacity: .3) { 
    background: rgb(200, 54, 54); /* The Fallback */ 
    background: rgba(200, 54, 54, $opacity); 
}

我已經申請$opacity好了，但現在我是一個卡住了$color部分。我將發送到mixin的顏色將是HEX而不是RGB。

我的實例的使用將是：

element { 
    @include background-opacity(#333, .5); 
}

我如何使用這個混入內的十六進制值？

來源

2012-06-07 Rick Donohoe

277

的rgba() function可以接受一個十六進制顏色以及十進制的RGB值。例如，這會工作得很好：

@mixin background-opacity($color, $opacity: 0.3) { 
    background: $color; /* The Fallback */ 
    background: rgba($color, $opacity); 
} 

element { 
    @include background-opacity(#333, 0.5); 
}

如果你需要打破十六進制顏色爲RGB分量，不過，你可以使用red()，green()和blue()功能，可以這樣做：

$red: red($color); 
$green: green($color); 
$blue: blue($color); 

background: rgb($red, $green, $blue); /* same as using "background: $color" */

來源

2012-06-07 21:00:24 hopper

我發誓我試過這個，而r，b，g功能並沒有工作。我使用的是來自Drupal後端的動態顏色，但可能會破壞某些東西。儘管如此，我還是在進一步研究後發現答案+1 –

但是，＃（$ color + $ opacity）的十六進制等價物是什麼？ - 這可能是有用的。可行？ – somedirection

據我所知，RGBA增加了* opacity *，這意味着您可以看到背後的元素。用標準的'hex'，你不能這樣做。 –

你可以試試這個解決方案，是最好的... URL（github）

// Transparent Background 
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8 

// Extend this class to save bytes 
.transparent-background { 
    background-color: transparent; 
    zoom: 1; 
} 

// The mixin 
@mixin transparent($color, $alpha) { 
    $rgba: rgba($color, $alpha); 
    $ie-hex-str: ie-hex-str($rgba); 
    @extend .transparent-background; 
    background-color: $rgba; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str}); 
} 

// Loop through opacities from 90 to 10 on an alpha scale 
@mixin transparent-shades($name, $color) { 
    @each $alpha in 90, 80, 70, 60, 50, 40, 30, 20, 10 { 
    .#{$name}-#{$alpha} { 
     @include transparent($color, $alpha/100); 
    } 
    } 
} 

// Generate semi-transparent backgrounds for the colors we want 
@include transparent-shades('dark', #000000); 
@include transparent-shades('light', #ffffff);

來源

2012-06-07 10:06:16

你的答案是好的，但似乎是不必要的複雜。我猜透明色調與我的問題無關，但是你能否解釋一下透明背景課程的內容？我假設我不需要它，如果我不使用透明色調mixin？ –

@RickDonohoe，據我記憶，z-index：1，透明背景是IE <9的後備。我認爲埃利塔菲將這個分類放到單獨的課堂中，以便在其他需求中進一步使用。在回答中觀察行，從「From：」開始...... –

有一個內建的混入：transparentize($color, $amount);

background-color: transparentize(#F05353, .3);

的量應爲0至1;

Official Sass Documentation (Module: Sass::Script::Functions)

來源

2015-08-31 09:26:32 user3631047

我喜歡這個！非常適合現代瀏覽器實施。 –

+11

作爲一個方面說明：$金額是多少它將減去，而不是您想要設置的值 – MMachinegun

工作很好，除了數量似乎是相反的意思，你想讓它'90％'透明來得到結果' .1' –

SASS有一個內置的rgba() function評估值。

rgba($color, $alpha)

例如，

rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)

使用自己的變量的一個例子：

$my-color: #00aaff; 
$my-opacity: 0.5; 

.my-element { 
    background-color: rgba($my-color, $my-opacity); 
}

輸出：

.my-element { 
    background-color: rgba(0, 170, 255, 0.5); 
}

來源

2017-05-04 22:48:11

薩斯 - 轉換十六進制的RGBA背景不透明度

回答

相關問題