class 둘로 나눌 시 background-clip: text; 적용안되는 문제

Question

css에서 위에 코드와 같이 속성값을 하나의 클래스에 넣어주면 의도한대로 화면이 나오는데요, 아래와 같이 클래스를 두 개로 나누면 글자 자체가 사라져버리는 문제가 발생하고 있습니다.두 클래스(<span class&#61;&#34;gra-skyBlue-to-yellow text-gradation&#34;>) 모두 다른 지정된 속성값은 없고, 색상(--gra-skyblue-to-yellow: linear-gradient(277deg, #6FBAFF, #FFD88B);)에도 문제 없습니다.혹시 왜 이런 문제가 발생하는지 아시는 분 계신가요?(사실 의도한대로 화면이 나오는 경우에도 background-clip: text;는 적용이 안되는데요, 브라우저 호환성 때문이라고 해서 -webkit-background-clip: text;가 적용되기 때문에 문제가 없다고 생각했는데, 클래스를 나누면 글자가 사라지니까 해당 문제를 해결해야 하나 싶네요.. 아니면 완전히 다른 이유일까요?).gra-skyBlue-to-yellow { background: var(--gra-skyBlue-to-yellow); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } ------ .gra-skyBlue-to-yellow { background-image: var(--gra-skyBlue-to-yellow); } .text-gradation { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

냥냥가면 · Answer

css만 봐서는 전혀 알 수가 없네요;;

100드래곤 · Answer

postcss 를 사용해서 표준화 시키면 걱정하지 않고 개발이 가능해요

class 둘로 나눌 시 background-clip: text; 적용안되는 문제

2개의 답변

기술 목록