[티스토리] 스킨 편집 글 헤더 이미지 블러처리 with hELLO

 

안녕하세요. 스킨을 수정하면서 공유하면 좋을 거 같아서 작성합니다.

 

Before.

기존에는 다음 사진처럼 헤더의 이미지 때문에 제목 타이틀이 잘 보이지 않았습니다.

 

After.

스킨의 css를 다음처럼 수정해주면

/* =========================
   글 헤더 썸네일 블러 처리
   ========================= */
#header .img img.thumb {
  filter: blur(12px);
  transform: scale(1.2); /* 블러 가장자리 깨짐 방지 */
}

/* 영역 밖 흐림 잘라내기 */
#header .img {
  overflow: hidden;
}

/*글 헤더 글자 강조*/
#header .img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

 

이렇게 이미지가 흐려져서 타이틀이 이쁘게 잘 보입니다.

 

추가로, 초반에는 다음처럼 하단에 이미지가 넘치는 현상이 발생해서 overflow를 설정해주었습니다.