혼합 모드를 사용하여 콘텐츠 다듬기

혼합 모드를 사용하여 div 블록의 흑백 콘텐츠를 자릅니다.
밝게 및 어둡게 혼합 모드는 모양 절단기처럼 작동하여 디자인의 어둡거나 밝은 요소에서 원본 채우기를 제거하고 해당 요소를 통해 배경을 드러낼 수 있습니다. 단색, 이미지, 비디오 등 원하는 배경을 사용하여 요소를 빛나게 할 수 있습니다.

다음을 삽입하여 시작하세요. 분절 캔버스에. 그런 다음 배경화면 동영상 또는 시각적 구성요소와 블록 요소분절. 마지막으로 구성요소(예: 텍스트 단위, 단락, 버튼 등)를 블록 요소.

당신은 당신의 볼 수 있습니다 배경화면 동영상 또는 시각적 이러한 요소를 통해 높이, 크기 등을 적절하게 조정하세요. 배경 비디오에 대해 자세히 알아보세요.

탐색기 패널에서 "콘텐츠 블록"이라는 Div 블록과 배경 비디오가 섹션 내에 중첩되어 있습니다.

흰색 블록 요소로 혼합 모드를 조정하려면 다음을 수행하십시오.

  1. 다음을 선택하세요. 블록 요소
  2. 액세스 디자인 패널 > 배경
  3. 팔레트를 탭하세요. 색조 을 적용하다 블록 요소 배경 하얀색
  4. 색조(예: 배경 색조, 텍스트 색조 등)를 구성하여 검은색 모든 구성 요소에 대해 블록 요소 반투명해지고 싶다고
  5. 다음을 선택하세요. 블록 요소
  6. 액세스 디자인 패널 > 영향
  7. 펼치다 병합 메뉴를 선택하고 닦다
스타일 패널의 효과 섹션에서 혼합이 밝게 설정되었습니다.

검은색 블록 요소로 혼합 모드를 구성하려면:

  1. 다음을 선택하세요. 블록 요소
  2. 액세스 디자인 패널 > 배경 
  3. 팔레트를 탭하세요. 색조 을 적용하다 블록 요소 배경 검은색
  4. 색조(예: 배경 색조, 텍스트 색조 등)를 구성하여 하얀색 모든 구성 요소에 대해 블록 요소 반투명해지고 싶다고
  5. 다음을 선택하세요. 블록 요소
  6. 액세스 디자인 패널 > 영향
  7. 펼치다 병합 메뉴를 선택하고 어둑한

닦다 희미한 요소를 사라지게 만듭니다. 어둑한 빛나는 요소를 사라지게 만듭니다. 혼합 모드에 대해 자세히 알아보세요.

블렌딩은 밝게 설정되어 있으며 비디오 배경은 흰색 div 블록의 중첩된 요소를 통해 볼 수 있습니다.
블렌딩은 어둡게 설정되었으며 비디오 배경은 검은색 div 블록의 중첩된 요소를 통해 볼 수 있습니다.
알림: 웹사이트에 모든 종류의 배경(비디오, 이미지, 색조 등)을 삽입할 수 있습니다. 포함하는 배경이 블록 요소의 배경과 적절한 차이가 있는지 확인하세요. 이렇게 하면 블록 요소 내에서 텍스트와 기타 요소가 눈에 띄게 됩니다. 자세한 내용을 알아보려면 색상 명암비에 대한 Webflow 대학 강의를 방문하세요.
이완 막
Ewan Mak의 최신 게시물 (모두 보기)