전자 앱을 디자인하고 있으므로 CSS 변수에 액세스 할 수 있습니다. 색 변수를 vars.css다음과 같이 정의했습니다 .

:root {
  --color: #f0f0f0;
}

이 색상을에 사용하고 싶지만 main.css일부 불투명도가 적용되었습니다.

#element {
  background: (somehow use var(--color) at some opacity);
}

어떻게하면 되나요? 전처리기를 사용하지 않고 CSS 만 사용하고 있습니다. 모든 CSS 답변을 선호하지만 JavaScript / jQuery를 수락합니다.

opacity투명하지 않아야하는 배경 이미지를 사용하고 있기 때문에 사용할 수 없습니다 .

기존 색상 값을 가져 와서 알파 채널을 적용 할 수 없습니다. 즉,와 같은 기존 16 진수 값을 가져 와서 #f0f0f0알파 구성 요소로 지정하고 결과 값을 다른 속성과 함께 사용할 수 없습니다 .

그러나 사용자 정의 속성을 사용하면 16 진수 값을 RGB 트리플렛으로 변환하여 사용할 수 있으며 rgba()해당 값을 쉼표를 포함하여 사용자 정의 속성에 저장하고 원하는 알파 값을 가진 함수 var()로 해당 값을 대체 rgba()할 수 있습니다. 그냥 일이야:

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

이것은 거의 사실이 아닌 것 같습니다. ¹ 어떻게 작동합니까?

커스텀 속성의 값으로 치환된다는 사실에 놓여 마법 으로는 교체 할 때 var(), 특성 값에 대한 참조를 하기 전에 그 속성의 값이 계산된다. 지금까지 사용자 지정 속성에 관한 한대로의 가치 있음이 수단 --color귀하의 예제에서 모두에서 컬러 값이 아닙니다 까지var(--color) 표현은 색상 값 (및 해당 맥락에서) 기대 어딘가에 나타납니다. 에서 2.1 CSS의-변수 사양의 :

사용자 정의 속성에 허용되는 구문은 매우 허용됩니다. 시퀀스에 <bad-string-token>, <bad-url-token>, 일치하지 않는 <)-token>, <]-가 포함되지 않는 한 <declaration-value> 생성은 하나 이상의 토큰 시퀀스와 일치합니다. token> 또는 <}-token> 또는 "<" "값을 가진 최상위 <semicolon-token> 토큰 또는 <delim-token> 토큰.

예를 들어, 다음은 유효한 사용자 정의 특성입니다.

--foo: if(x > 5) this.width = 10;

이 값은 변수로는 쓸모가 없지만 일반적인 속성에서는 유효하지 않으므로 JavaScript에서 읽고 작동 할 수 있습니다.

그리고 3 절 :

속성에 하나 이상의 var () 함수가 포함되어 있고 해당 함수가 구문 상 유효한 경우 구문 분석시 전체 속성 문법이 유효한 것으로 가정해야합니다. var () 함수가 대체 된 후 계산 된 값 시간에 구문 검사 만됩니다.

이것은 240, 240, 240위에서 본 값이 선언이 계산 되기 전에rgba() 함수 로 직접 대체 됨을 의미합니다 . 그래서 이거:

#element {
  background-color: rgba(var(--color), 0.8);
}

rgba()쉼표로 구분 된 숫자 값이 4 개 이상이어야 하므로 처음 에는 유효한 CSS가 아닌 것 같습니다.

#element {
  background-color: rgba(240, 240, 240, 0.8);
}

물론 이것은 완벽하게 유효한 CSS입니다.

한 단계 더 나아가면 알파 구성 요소를 자체 사용자 정의 속성에 저장할 수 있습니다.

:root {
  --color: 240, 240, 240;
  --alpha: 0.8;
}

동일한 결과로 대체하십시오.

#element {
  background-color: rgba(var(--color), var(--alpha));
}

이를 통해 즉시 교환 할 수있는 다른 알파 값을 가질 수 있습니다.

¹ _{사용자 정의 속성을 지원하지 않는 브라우저에서 코드 스 니펫을 실행하는 경우입니다.}

OP가 전처리기를 사용하지 않는다는 것을 알고 있지만 다음 정보가 여기에 대한 답변의 일부인 경우 도움이 될 것입니다 (아직 댓글을 달 수 없습니다. 그렇지 않으면 @BoltClock 답변에 댓글을 달았습니다.

예를 들어 scss를 사용하는 경우 scss는 4 개의 매개 변수가 필요한 scss 관련 rgba () / hsla () 함수를 사용하여 스타일을 컴파일하려고 시도하기 때문에 위의 대답이 실패합니다. 그러나 rgba () / hsla ()도 기본 CSS 함수이므로 문자열 보간을 사용하여 scss 함수를 무시할 수 있습니다.

예 (sass 3.5.0+에서 유효) :

:root {
    --color_rgb: 250, 250, 250;
    --color_hsl: 250, 50%, 50%;
}

div {
    /* This is valid CSS, but will fail in a scss compilation */
    background-color: rgba(var(--color_rgb), 0.5);
    
    /* This is valid scss, and will generate the CSS above */
    background-color: #{'rgba(var(--color_rgb), 0.5)'};
}

<div></div>

lighten()결과 코드가 기능적인 CSS가 아니기 때문에과 같은 CSS가 아닌 scss 함수에는 문자열 보간이 작동 하지 않습니다. 그래도 여전히 유효한 scss이므로 컴파일시 오류가 발생하지 않습니다.

나는 비슷한 상황에 있었다, 그러나 변수에서 아무것도 할 수 있기 때문에 불행하게도 주어진 솔루션은 나를 위해 작동하지 않았다 rgb까지 hsl로 hex또는 색상 이름을. 의사 와 요소에 and
를 적용 하여이 문제를 해결했습니다 .background-coloropacity:after:before

.container {
    position: relative;
}

.container:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--color);
    opacity: 0.3;
}

배경을 적용 할 요소에 따라 스타일을 약간 변경해야 할 수도 있습니다.
또한 모든 상황에서 작동하지는 않지만 다른 솔루션을 사용할 수없는 경우에 도움이되기를 바랍니다.

편집 : 방금이 솔루션은 대상 요소 앞에 요소를 만들고 투명한 배경색을 적용하기 때문에 텍스트 색상에도 영향을 미친다는 것을 알았습니다.
경우에 따라 문제가 될 수 있습니다.

이것은 실제로 CSS로 가능합니다 . 조금 더러워 그라디언트를 사용해야합니다. 예를 들어 작은 스 니펫을 코딩했습니다. 어두운 배경의 경우 밝은 흰색의 경우와 같이 검은 색 불투명도를 사용해야합니다.

:root {
  --red: rgba(255, 0, 0, 1);
  --white-low-opacity: rgba(255, 255, 255, .3);
  --white-high-opacity: rgba(255, 255, 255, .7);
  --black-low-opacity: rgba(0, 0, 0, .3);
  --black-high-opacity: rgba(0, 0, 0, .7);
}

div {
	width: 100px;
	height: 100px;
	margin: 10px;
}
    
    
.element1 {
	background: 
        linear-gradient(var(--white-low-opacity), var(--white-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element2 {
	background: 
        linear-gradient(var(--white-high-opacity), var(--white-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}
    
.element3 {
	background: 
        linear-gradient(var(--black-low-opacity), var(--black-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element4 {
	background: 
        linear-gradient(var(--black-high-opacity), var(--black-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

<div class="element1">hello world</div>
<div class="element2">hello world</div>
<div class="element3">hello world</div>
<div class="element4">hello world</div>

:root{
--color: 255, 0, 0;
}

#element{
    background-color: rgba(var(--color), opacity);
}

여기서 불투명도를 0에서 1 사이의 값으로 바꾸십시오.

SCSS / SASS

장점 : 모든 채널 (0-255)에 8 비트를 사용하는 대신 16 진수 색상 값만 사용할 수 있습니다.

이것이 내가 https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables 의 초기 아이디어로 내가 한 방법입니다.

편집 :#{$color-name}-rgb 생성 된 * -r, * -g, * -b CSS 변수를 사용 하고 생략 하도록 alpha 함수를 수정할 수도 있습니다 .

결과

body {
  --main-color: rgb(170, 68, 204);
  --main-color-rgb: 170,68,204;
  --main-color-r: 170;
  --main-color-g: 68;
  --main-color-b: 204;
}

.button-test {
  // Generated from the alpha function
  color: rgba(var(--main-color-r), var(--main-color-g), var(--main-color-b), 0.5);
  // OR (you wrote this yourself, see usage)
  color: rgba(var(--main-color-rgb), 0.5);
}

용법:

body {
    @include defineColorRGB(--main-color, #aa44cc);
}

.button-test {
  // With alpha function:
  color: alpha(var(--main-color), 0.5);
  // OR just using the generated variable directly
  color: rgba(var(--main-color-rgb), 0.5);
}

믹스 인 및 기능

@mixin defineColorRGB($color-name, $value) {
    $red: red($value);
    $green: green($value);
    $blue: blue($value);
    #{$color-name}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
    #{$color-name}-rgb: $red,$green,$blue;
    #{$color-name}-r: $red;
    #{$color-name}-g: $green;
    #{$color-name}-b: $blue;
}

// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

@function alpha($color, $opacity) {
    $color: str-replace($color, 'var(');
    $color: str-replace($color, ')');
    $color-r: var(#{$color+'-r'});
    $color-g: var(#{$color+'-g'});
    $color-b: var(#{$color+'-b'});
    @return rgba($color-r, $color-g, $color-b, $opacity);
}

희망적으로 이것은 누군가를 구할 수 있기를 바랍니다.

각 색상에 고유 한 변수 / 값을 설정할 수 있습니다 (원본과 불투명 색상).

:root {
  --color: #F00;
  --color-opacity: rgba(255, 0, 0, 0.5);
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color-opacity);
}

<div id="a1">asdf</div>
<div id="a2">asdf</div>

이것을 사용할 수없고 자바 스크립트 솔루션에 문제가 없다면 다음 중 하나를 사용할 수 있습니다.

$(function() {
  $('button').click(function() {
    bgcolor = $('#a2').css('backgroundColor');
    rgb_value = bgcolor.match(/\d+,\s?\d+,\s?\d+/)[0]
    $('#a2').css('backgroundColor', 'rgba(' + rgb_value + ', 0.5)');
  });
});

:root {
  --color: #F00;
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">asdf</div>
<div id="a2">asdf</div>
<button>Click to change opacity</button>

일반 CSS 변수와 함께 rgba ()를 사용하려면 다음을 시도하십시오.

1. : root 안에 색을 선언하지만 다른 답변과 같이 rgb ()를 사용하지 마십시오. 그냥 값을 쓰십시오

:root{
  --color : 255,0,0;
  }

2. var ()을 다른 답변으로 사용하여 --color 변수를 사용하십시오.

#some-element {
  color : rgba(var(--color),0.5);
}

CSS에서는 rgba 값을 사용할 수 있어야합니다.

#element {
  background: rgba(240, 240, 240, 0.5);
}

또는 불투명도를 설정하십시오.

#element {
  background: #f0f0f0;
  opacity: 0.5;    
}

나처럼 16 진수 색상을 좋아한다면 다른 해결책이 있습니다. 16 진수 값은 6 자리이며 그 이후의 알파 값입니다. 00은 100 % 투명도입니다. 99는 약 75 %입니다. 알파벳 'a1-af'를 사용한 다음 'b1-bf'는 'ff'로 끝나고 100 % 불투명합니다.

:root {
--color: #F00;
}

#element {
background: var(--color)f6;
}