來自十六進制 RGB 值的 CSS 中的半透明背景顏色

Question

背景：我必須使用提供一些集成 SASS 功能的 CMS：用戶可以定義顏色，它們以十六進制值的形式提供給我可以編輯的 SCSS 文件的變量。

問題：我必須使用這種顏色之一的較淺版本作為 div 的背景。 （在具有一定透明度的背景顏色的意義上更輕）。

通常我會這樣做

background-color: rgba(r,g,b,a) ;

但是，如果我沒有單一的紅/藍/綠值，而只有組合的十六進制 RGB 值，該怎么辦？

應達到的結果示例：

 /* user color comes as a variable containing a hex value variable: $color example value: 00d; */ h1{ background-color: #00d; /* $color resolves to 00d */ } p{ background-color: #7e7eed; /* <- this value should be calculated from the variable $color, in this case #00d + opacity 50% */ }

 <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Answer 1

使用減輕 SASS功能

lighten($color, 20%)

如果要更改顏色的Alfa ，請使用rgba函數

rgba($color,0.8)

觀看演示

Answer 2

修改CSS的“不透明度” css屬性。 值0表示完全透明，值1表示完全不透明，值0.5表示一半透明，依此類推。較小的不透明度值會使您的顏色“更淺”。 0到1之間的任何值都可以。 這基本上與您的rgba中的alpha值相同（a == alpha）。

參考： http : //www.w3schools.com/css/css_image_transparency.asp