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

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

問題：我必須使用這種顏色之一的淺色版本作爲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>

來源

2016-09-18 Teetrinker

檢查這個問題：http：//stackoverflow.c om/questions/7015302/css-hexadecimal-rgba – Wlada

編輯CMS，更改提供該功能的功能。 – Sarcoma

@Wlada：謝謝，還有很好的編譯答案 – Teetrinker

使用lighten SASS功能

lighten($color, 20%)

如果你想改變你的顏色的阿爾法，使用rgba function

rgba($color,0.8)

見demo

來源

2016-09-18 19:47:12

好主意。必須檢查CMS – Teetrinker

是否支持該功能，這使我走上了正確的道路，CMS中提供了類似的功能。謝謝！ – Teetrinker

修改CSS的「不透明度」 CSS屬性。 0值是完全透明的，1值是完全不透明的，0.5值是半透明的等等。較小的不透明度值將使您的顏色「更輕」。介於0和1之間的任何值都可以工作。這與你的rgba（a == alpha）中的alpha值基本相同。

裁判：http://www.w3schools.com/css/css_image_transparency.asp

來源

2016-09-18 15:27:03 mangotang

也影響到盒子的內容，不僅僅是它的背景，所以不是一個解決方案。 – Teetrinker

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

回答

相關問題