실루엣 안에 이미지나 비디오를 배치하는 방법은 무엇입니까?

일부 웹사이트에서 이미지나 비디오가 실루엣으로 재생되는 것을 본 적이 있을 것입니다. 실루엣은 이미지, 사물, 사람 또는 동물일 수 있으며 검은색으로 표현되어 주제의 윤곽을 나타냅니다. 비디오나 이미지가 실루엣의 색상으로 표시되도록 실루엣에 이미지나 비디오를 삽입할 수 있습니다

이 글에서는 이미지나 비디오를 실루엣에 넣는 방법을 배웁니다.

윤곽선 안에 개체를 배치하는 방법은 무엇입니까?

실루엣은 검은색이나 기타 팔레트 색상의 단색 모양으로 표현된 사물이나 사람의 이미지입니다. 이제 여기서 사용할 속성은 특정 요소의 콘텐츠가 가장 가까운 상위 요소와 혼합되는 방식을 지정하는 mix-blend 속성이 될 것입니다.

문법

mix-blend 속성을 사용하는 구문은 다음과 같습니다 -

으아악

블렌딩 블렌드 모드에는 Normal, Multiply, Screen 및 Darken과 같은 값이 있으며 각 모드는 가장 가까운 상위 항목과의 블렌딩 관계를 변경합니다. 이 혼합 속성을 더 잘 이해하기 위해 예를 살펴보겠습니다.

예

아래 예에서는 3개의 컨테이너를 만든 다음 3개의 서로 다른 클래스를 제공합니다. 그런 다음 CSS 섹션에서 너비와 높이, 테두리 반경을 변경하여 원으로 만든 다음 모든 원의 색상을 변경했습니다. 예상되는 출력 코드는 다음과 같습니다 -

으아악

보시다시피 mix-blend 속성을 사용하여 위의 원을 2가지 색상으로 혼합하고 있습니다.

이제 혼합 모드 속성이 어떻게 작동하는지 알았으므로 실루엣 내부에 이미지나 비디오를 배치하고 이를 수행하는 데 필요한 리소스가 있는지 확인하겠습니다. 코드 부분을 살펴보며 실루엣에 이미지나 동영상을 삽입하는 방법을 살펴보겠습니다.

예

이 예에서는 블렌드 블렌드 모드 속성을 사용하여 실루엣 이미지에 이미지를 추가합니다.

여기서 먼저 실루엣 이미지를 추가한 다음 혼합하려는 이미지를 추가했습니다. 다음으로 이를 div 아래에 래핑하고 클래스를 제공합니다. 그런 다음 CSS 섹션으로 이동하여 추가한 이미지의 혼합 혼합 모드 속성을 사용하고 값을 화면으로 설정합니다. 다음 코드를 사용하여 얻을 수 있는 출력을 살펴보겠습니다.

으아악

위 출력에서 ​​볼 수 있듯이 실루엣 이미지를 추가한 다음 다른 이미지를 추가했으며 블렌드 블렌드 모드 속성을 사용하면 이미지가 실루엣과 혼합되어 2개의 다른 이미지가 아닌 동일한 이미지처럼 보입니다.

참고 - 혼합 혼합 모드 속성을 지원하는 브라우저에는 텍스트, 이미지 및 SVG에 혼합 혼합 모드 속성을 사용할 수 있습니다. chrome, edge, safari, Firefox 등이 있습니다. p>

결론

실루엣 효과는 웹 사이트를 더욱 상호 작용적이고 매력적으로 만드는 데 사용할 수 있으며 콘텐츠가 가장 가까운 부모 및 부모의 배경과 혼합되는 방식을 정의하는 혼합 혼합 속성인 CSS의 단일 속성을 사용하여 수행할 수 있습니다.

이 기사에서는 Blend Blend Mode 속성과 같은 일부 CSS 속성을 사용하여 이미지나 비디오를 실루엣에 넣는 방법을 배웠습니다.

위 내용은 실루엣 안에 이미지나 비디오를 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!