CSS3 혼합 - 혼합 모드로 이미지에 텍스트를 표시하는 방법
이미지 배경 대형 디스플레이 텍스트 뒤에 크게 보입니다. 그러나 CSS 구현은 그리 간단하지 않습니다. 우리는 배경 클립 : 텍스트; 속성, 그러나 여전히 충분한 브라우저 지원없이 실험적인 기능입니다..
이미지 배경을 텍스트 뒤에 표시하는 CSS 대안 ~을 사용하여 믹스 - 블렌드 모드 재산. HTML 요소의 블렌드 모드 Internet Explorer와 같이 일부 최신 데스크톱 및 모바일 브라우저에서 상당히 지원됩니다.
이 게시물에서 우리는 믹스 - 블렌드 모드 (두 가지 모드가 구체적으로) 작동하며,이를 사용하여 이미지 배경이있는 텍스트를 표시하십시오. 두 가지 사용 사례 :
- 배경 이미지 볼 수있다. 텍스트를 통해
- 배경 이미지 뛰어 다니다 본문
아래 데모에서 몇 가지 예를 참조하십시오 (이미지는 unsplash.com에서 제공됨)..
그만큼 믹스 - 블렌드 모드 CSS 속성은 함유량 그리고 배경 HTML 요소의 색채로 섞다.
블렌딩 모드 목록을 살펴 보겠습니다. 곱하다 과 화면 이 게시물에.
먼저이 두 가지 특정 블렌드 모드가 어떻게 작동하는지 살펴 보겠습니다..
방법 곱하다 & 화면 블렌드 모드 작동
블렌딩 모드는 기술적으로 최종 색 값을 계산한다. 요소의 색상 요소와 그 배경을 사용하여.
그만큼 곱하다 혼합 모드
에서 곱하다 블렌드 모드에서는 요소의 개별 색상과 배경이 곱한, 최종 색상이 최종 혼합 버전에 적용됩니다..
그만큼 곱하다 혼합 모드는 다음 공식에 따라 계산됩니다.
B (Cb, Cs) = Cb × Cs
어디에:Cb - 배경의 색상 구성 요소Cs - 소스 요소의 색 구성 요소비 - 혼합 기능
언제 Cb 과 Cs 곱해진 결과 색상은이 두 색상 구성 요소의 블렌드이며 두 가지 색 중 가장 어두운 색만큼 어둡다..
텍스트 이미지 배경을 만들려면 다음과 같은 경우에 중점을 둘 필요가 있습니다. Cs (소스 요소의 색 구성 요소)는 다음과 같습니다. 검정색 또는 흰색 중 하나.
만약 Cs ~이다. 검은 그것의 가치는 0, 출력 색상도 검은 색이됩니다. Cb × 0 = 0. 따라서 요소가 검정색 일 때 배경색이 어떤 색인지는 중요하지 않습니다., 혼합 후에 볼 수있는 것은 모두 검은 색입니다..
만약 Cs ~이다. 화이트 그것의 가치는 1, 출력 색상은 무엇이든간에 Cb 왜냐하면Cb × 1 = Cb. 따라서이 경우에는 배경을 직접 볼 수 있습니다. 그대로.
그만큼 화면 혼합 모드
그만큼 화면 블렌드 모드는 곱하다 블렌드 모드 그 반대의 결과. 그래서, 검은 전경 배경을 보여줍니다. 그대로, 및 하얀 전경은 흰색을 보여준다. 무엇이든간에.
수식을 빨리 봅시다.
B (Cb, Cs) = Cb + Cs- (Cb × Cs)
언제 Cs ~이다. 검은 (0)이면 배경색이 블렌딩 후에 다음과 같이 표시됩니다.
Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb
언제 Cs ~이다. 화이트 (1) 결과는 다음과 같이 모든 배경에서 흰색이됩니다.
Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1
1. 텍스트를 통해 보여지는 이미지
배경 이미지를 통해 보여지는 텍스트를 표시하기 위해 화면 혼합 모드 와 검은 색 텍스트 과 흰색 주변 공간.
물
.배경 너비 : 600px; 높이 : 210px; background-image : url (someimage.jpg); background-size : 100 %; 여백 : 자동; . 텍스트 색상 : 검정; 배경색 : 흰색; 믹스 - 블렌드 - 모드 : 스크린; 너비 : 100 %; 높이 : 100 %; 글꼴 크기 : 160pt; 글꼴 - 무게 : 볼더; 텍스트 정렬 : 가운데; 선 높이 : 210px; margin : 0;
현재 우리의 텍스트는 다음과 같습니다. 다음 단계에서는 배경에 사용자 정의 색상을 추가합니다..
색상 추가 중
지금까지 짐작 했겠지만, 블렌드 모드를 사용하면 텍스트를 둘러싼 영역에 대해 두 가지 색상 만 남습니다. - 검정 또는 흰색. 하나 흰색, 색상을 추가 할 수 있습니다. 오버레이 사용, 오버레이 색 사용 된 이미지와 잘 어울립니다..
주변 지역에 색을 추가하려면 물 이 기술을 사용하여 이미지 배경으로 텍스트 주위의 주변을 채색 할 수 있습니다. 이 기술은 미묘한 투명 색상. 완전히 불투명 한 색상 또는 이미지와 일치하지 않는 색상을 사용하는 경우 텍스트 내부에 나타나는 이미지는 사용 된 색상의 색조가 매우 보일 것입니다., 불투명 한 색상 피하기. 이미지 배경 위에 일반적인 텍스트 배치 같은 기술이 필요하다., 위의 데모가 어떻게 보이는지에 대한 예를 보여 드리겠습니다. 효과가 반대로 바뀐다., 즉 텍스트 색이 흰색이고 배경이 검은 색일 때. 당신은 동일한 오버레이 흰색으로 유지하고 싶지 않으면 텍스트에 색을 추가하십시오.. 그리고 아래에 어떻게 대소 문자가 보이는지 알 수 있습니다. Internet Explorer 또는 해당 브라우저를 지원하지 않는 다른 브라우저 믹스 - 블렌드 모드 : 곱하기 속성을 사용하면 오버레이의 배경색이 조금 더 섞다. 텍스트 내부에 이미지가 나타납니다..
.오버레이 배경색 : rgba (0,255,255, .1); mix-blend-mode : 곱하기; 너비 : 100 %; 높이 : 100 %; 위치 : 절대; 상단 : 0;
2. 이미지 배경으로 둘러싸인 텍스트
.텍스트 컬러 : 화이트; 배경색 : 검정색; 믹스 - 블렌드 - 모드 : 스크린; 너비 : 100 %; 높이 : 100 %; 글꼴 크기 : 160pt; 글꼴 - 무게 : 볼더; 텍스트 정렬 : 가운데; 선 높이 : 210px; margin : 0;
.오버레이 배경색 : rgba (0,255,255, .1); mix-blend-mode : 곱하기; 너비 : 100 %; 높이 : 100 %; 위치 : 절대; 상단 : 0;
믹스 - 블렌드 모드 속성을 사용하면 이미지 배경이 나타나지 않고 텍스트가 검정색 (또는 흰색)으로 유지됩니다..
