이글은 북클럽 스킨 사용시 블로그 글 배경이미지 블러처리하는 예제 입니다.
블로그 글 제목 뒤로 배경이미지가 보여지는데 글 제목 텍스트와 배경이 겹쳐지면서 위 이미지처럼 제목의 가독성이 떨어지는 상황이 종종 발생합니다. 이럴때 배경이미지를 투영도를 조절하고 블러처리하면 글 제목 텍스트와 대비가 이루어져서 가독성이 높일 수 있습니다.
1. 배경이미지 투명도 조절
rgba() 입력값은 빨강, 녹색, 파랑, 투명도 값 순서로 입력합니다. 투명도 값은 0이면 완전 투명이고 1 이면 완전 불투명을 의미합니다.
1. 티스토리 관리페이지 → 꾸미기 → 스킨편집 → HTML 편집 → CSS
2. post-cover:before 검색
3. background-color: rgba(0,0,0,0.65) 마지막 값 조절
2. 블러효과 추가
blur() 입력값은 크기가 클 수록 뭉개지는 정도가 커집니다.
1. 티스토리 관리페이지 → 꾸미기 → 스킨편집 → HTML 편집 → CSS
2. post-cover:before 검색
3. backgrop-filter:blur(8px); 추가
3. 테스트
블로그 글 배경 원본
투명도 조절 0.25 → 0.65
블러효과 추가
댓글