찾다

 >  Q&A  >  본문

CSS 색상 변수에 투명도를 적용하는 방법은 무엇입니까?

<p>CSS 변수에 액세스할 수 있도록 전자에서 앱을 디자인하고 있습니다. <code>vars.css</code>에 색상 변수를 정의했습니다. </p> <pre class="brush:css;toolbar:false;">:루트 { --색상: #f0f0f0; } </pre> <p><code>main.css</code>에서 이 색상을 사용하고 싶지만 일부 투명도를 적용하고 싶습니다. </p> <pre class="brush:css;toolbar:false;">#element { background: (어떻게든 var(--color)를 사용하고 투명도를 설정합니다); } </pre> <p>이 작업을 어떻게 수행하나요? 전처리기를 사용하지 않고 CSS만 사용합니다. 나는 순수한 CSS 답변을 선호하지만 JavaScript/jQuery 솔루션에도 열려 있습니다. </p> <p>투명하면 안 되는 배경 이미지를 사용하고 있기 때문에 <code>불투명도</code>를 사용할 수 없습니다. </p>
P粉348088995P粉348088995466일 전440

모든 응답(1)나는 대답할 것이다

  • P粉458725040

    P粉4587250402023-08-21 13:13:49

    기존 색상 값에는 알파 채널을 적용할 수 없습니다. 즉, 기존 16진수 값(예: #f0f0f0)에 알파 구성요소를 추가하고 결과 값을 다른 속성과 함께 사용할 수 없습니다.

    그러나 사용자 정의 속성을 사용하면 rgba()一起使用,将该值存储在自定义属性中(包括逗号!),使用var()将该值替换为具有所需alpha值的rgba() 함수와 함께 사용하기 위해 16진수 값을 RGB 삼중항으로 변환할 수 있으며 올바르게 작동합니다.

    으아아아 으아아아

    회신하다
    0
  • 취소회신하다