🌈 CSS로 텍스트 오버레이 효과 주기 (훼이크 쓰기)

오늘은 이런 UI를 css로 구현해볼 것임. 이유는 누가 어떻게 하냐고 물어봐서.

디자인으로 보면 대충 이런 구조임

HTML

<div class="wrap">
  <div class="img-box">
	<img src="이미지URL" alt="이미지"/>
    <p class="color-red">Christmas</p>
  </div>
  <p class="color-green">Christmas</p>
</div>

.img-box 내에 이미지, 빨간색 텍스트 부분을 같이 넣어줌
초록색 텍스트 부분은 .img-box 밖에다 배치

CSS

/*최상위 껍데기 생성*/
.wrap {
  margin: 30px;
  position: relative;
  width: 155px;
  height: 155px;
}

/*이미지 박스 효과 주기*/
.img-box {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 4px 4px 0px rgba(52, 70, 83, 0.25);
}

.img-box img{
  width: 100%;
  height: 100%;
}

/*텍스트 스타일 값*/
p{
  margin: 0;
  position: absolute;
  text-align: center;
  left: 50%; 
  transform: translate(-50%, -50%); 
}

.color-red{
  top: 0;
  color: #FF2424;
}

.color-green {
  top:0;
  color: #167230;
}

1. .img-box에 초록색 텍스트를 반 쯤 걸쳐주어야 하니까 .wrap에도 position: relative;가 들어가야함

2. .img-box가 초록색 텍스트보다 위에 와야하니까 z-index 추가

3. 텍스트 중앙 정렬 text-align 말고 position 으로 조절

완성

(이미지 svg로 복붙 해오느라 코드 긴 거 무시해주세용.)