CSS 색상 변수에 불투명도를 적용하는 방법은 무엇입니까?
P粉495955986
P粉495955986 2023-08-24 00:12:47
0
1
490
<p>CSS 변수에 액세스할 수 있도록 Electron을 사용하여 앱을 디자인하고 있습니다. vars.css에 색상 변수를 정의했습니다. </p> <pre class="brush:css;toolbar:false;">:루트 { --색상: #f0f0f0; } </pre> <p><code>main.css</code>에서 이 색상을 사용하고 싶지만 약간의 불투명도가 적용되어 있습니다. </p> <pre class="brush:css;toolbar:false;">#element { 배경: (어떤 불투명도에서는 어떻게든 var(--color)를 사용합니다); } </pre> <p>어떻게 하나요? 전처리기를 사용하지 않고 CSS만 사용합니다. 나는 CSS로만 답변하는 것을 선호하지만 JavaScript/jQuery도 허용합니다. </p> <p>사용 중인 배경 이미지가 투명하면 안 되기 때문에 <code>불투명도</code>를 사용할 수 없습니다. </p>
P粉495955986
P粉495955986

모든 응답(1)
P粉715274052

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

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

으아아아 으아아아
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿