텍스트가 혼합 채우기 모드로 채우기

".box-with-text"의 "background-color"를 제거하면 텍스트 채우기가 작동하지 않는 문제가 있습니다.텍스트가 혼합 채우기 모드로 채우기

.box-with-text { 
    text-transform: uppercase; 
    font: bold 6rem Open Sans, Impact; 
    background: black; 
    color: white; 
    mix-blend-mode: multiply; 
} 

@keyframes stripes { 
    to { 
    background-size:100% 100%; 
    } 
} 
.wrapper { 
    max-width: 300px; 
    margin: 0 auto; 
} 
.container { 
    display: flex; 
    background: linear-gradient(crimson , crimson) white no-repeat 0 0; 
    background-size: 0 100%; 
    animation: stripes 5s; 
    animation-fill-mode: forwards; 
    text-align: center; 
}

Codepen

출처

2016-06-21 Rubocop

"작동하지 않는다"는 것은 무엇을 의미합니까? 배경색을 제거하면 효과가있는 것처럼 보이지만 전경색과 배경색이 같기 때문에 텍스트가 표시되지 않습니다. – Godwin

@ Godwin 나는 무엇을 해야할지 모르겠다. 투명 배경을 가진 텍스트를 볼 수있다. – Rubocop

[CSS 또는 Javascript를 사용하여 애니메이션 채우기] 가능한 복제본 (http://stackoverflow.com/questions/17745983/fill-animation -using-css-or-javascript) – Godwin

내가 여기에 "작동하지 않습니다"당신이 무슨 뜻인지 추측하고 당신을 위해 무엇을 찾고있는 것은 빨간색으로 채워집니다 흰색 배경에 흰색 텍스트를하는 것입니다 있으리라 믿고있어 애니메이션 (이 질문에 대한 설명을 펼치십시오.이게 당신이하려는 일이 아닙니다.).

.box-with-text { 
    text-transform: uppercase; 
    font: bold 6rem Open Sans, Impact; 
    background: white; 
    color: black; 
    mix-blend-mode: screen; 
}

이를 참조하십시오 :

당신은이 효과를 달성하기 위해 다른 블렌드 모드를 사용해야합니다, 당신은 흰색 전경 검은 색과 배경을 만들고 화면 블렌드 모드를 사용하여이 작업을 얻을 수 있습니다 http://codepen.io/Godwin/pen/oLYYvr?editors=1100을

출처

2016-06-21 21:32:25 Godwin

"box-with-text"에 배경색이없는 텍스트를보고 싶습니다. 믹스 블렌드 모드처럼 항상 배경이 필요합니다. – Rubocop

이 효과를 얻는 더 좋은 방법. 'overflow : hidden' 설정을 시도하고 폭을 0에서 100 %로 확장 했습니까? – Godwin

아니요, 아직, 좋은 소리입니다. 나는 그것을 시험해 볼 것입니다 코드 예제를 도와 줄 수 있습니까? – Rubocop

텍스트가 혼합 채우기 모드로 채우기

답변

관련 문제