首页 文章

CSS中的半透明背景颜色来自十六进制RGB值

提问于
浏览 次
1

Background: 我必须使用提供一些集成SASS功能的CMS：用户可以定义颜色，它们作为变量中的十六进制值提供给我可以编辑的SCSS文件 .

The problem: 我必须使用这种颜色之一的较轻版本作为div的背景 . （背景颜色较浅，透明度较高） .

通常我会这样做

background-color：rgba（r，g，b，a）;

但是，如果我没有单个红色/蓝色/绿色值，只有组合的十六进制RGB值，可以做些什么呢？

Example of the result that should be achieved:

/* 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>
css sass transparency background-color opacity

2 回答

  • 0

    使用lighten SASS功能

    lighten($color, 20%)

    如果要更改颜色的alfa，请使用rgba function

    rgba($color,0.8)

    见demo

    回复于
  • 2

    修改css的“opacity”css属性 . 值0表示完全透明，值1表示完全不透明，值0.5表示半透明等 . 较小的不透明度值将使您的颜色“更亮” . 任何介于0和1之间的值都可以 . 这与你的rgba（a == alpha）中的alpha值基本相同 .

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

    回复于

相关问题