CSS에서 16 진수 RGB 값의 반투명 배경색

Question

배경 : 일부 통합 된 SASS 기능을 제공하는 CMS에 대한 작업이 필요합니다. 사용자가 색상을 정의 할 수 있으며 변수의 16 진수 값으로 SCSS 파일에 제공됩니다 나는 편집 할 수있다.

문제 : div의 배경에이 색상 중 하나의 더 밝은 버전을 사용해야합니다. (투명도가있는 배경색의 의미에서 라이터).

보통 나는

background-color: rgba(r,g,b,a) 함께 할 것입니다;

하지만 단일 빨강/파랑/녹색 값은 없지만 결합 된 16 진수 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

사용 lighten SASS 기능

lighten($color, 20%) 

의 demo

Answer 2

이 CSS의 "불투명도"CSS 속성을 수정합니다. 값 0은 완전 투명하고, 값 1은 완전히 불투명하며, 값 0.5는 반투명 등입니다. 불투명도 값이 작을수록 색은 더 밝아집니다. 0과 1 사이의 모든 값이 작동합니다. 이것은 본질적으로 rgba의 알파 값 (a == alpha)과 같습니다.

심판 : 당신이 당신의 색상의 알파를 변경하려면 http://www.w3schools.com/css/css_image_transparency.asp