CSS/JS 이미지 텍스트 오버레이 격자 모양

-2

this 이 가능한지 궁금합니다. JS와 CSS를 배우고 있으며 Google과 StackOverflow를 검색했지만 아무런 대답도 없습니다. ALYSSA의 S 중 하나가 모델의 손안에 덮여 있습니다. 설명하고 싶지 않다면 그 효과의 이름을 말해주십시오.CSS/JS 이미지 텍스트 오버레이 격자 모양

출처

2017-02-28 ZeuS

이 사진은 Photoshop에서 만든 이미지 일뿐입니다. – Brad

'z-index' 속성과'absolute' 포지셔닝을 사용하여 서로 위에 요소를 오버레이 할 수 있습니다. 하지만 지적한대로 Photoshop에서 완료되었을 가능성이 높습니다. – zik

@ 브래드 나는 알고 있지만 CSS와 JS를 사용하여이 작업을 수행 할 수 있습니까? – ZeuS

-4

PhotoShop 또는 다른 이미지 편집 응용 프로그램을 사용한다고 생각합니다. https://assets.awwwards.com/awards/external/2017/02/58ad59d717a01.jpg 이미지 일뿐입니다. 코딩 없음.

비록 z- 인덱스를 사용할 수 있습니다. 다른 요소에 ALYS, 다른 요소에 SA MI, 다른 요소에 LLER를 넣습니다.

CSS보다 이러한 요소의 Z- 색인이 적절하게 정렬됩니다.

z-index 속성은 요소의 스택 순서를 지정합니다.

IMP : 스택 순서가 큰 요소는 항상 스택 순서가 낮은 요소 앞에 있습니다.

참고 : z- 색인은 위치 요소 (위치 : 절대, 위치 : 상대 또는 위치 : 고정)에서만 작동합니다.

출처

2017-02-28 11:40:04

그의 질문은 호버 효과에 관한 것이지 사진에 관한 것이 아닙니다. – MKAD

이 이미지는 Photoshop에서 제작되었지만 mask CSS 특성을 사용하여 텍스트 위에 팔을 재현하면이 이미지를 재현 할 수 있습니다. 당신은 3 개의 레이어로 끝날 것입니다 : 배경의 메인 이미지, 텍스트 레이어 그리고 메인 이미지가 다시 있지만 마스크가 있습니다. 마스크 이미지는 그래픽 프로그램에서 만들어지며 흰색 인 팔 부분을 제외하고 대부분 검은 색이됩니다.

출처

2017-02-28 11:42:52

CSS/JS 이미지 텍스트 오버레이 격자 모양

답변

관련 문제