[CSS] 티스토리 헤더 제목의 배경이미지 블러 처리 효과

배경과 제목이 겹쳐 가독성 떨어짐

티스토리에서 제공되는 기본 스킨 중 Odyssey 를 수정하여 사용하면서 글의 제목에 표시되는 배경이 너무 선명해 겹쳐 보이는 현상을 없애기 위해 배경에 blur effect 를 적용하였다.

아래의 두 이미지는 그 블러 효과를 적용하기 전과 후이며, 제목의 가독성이 훨씬 좋아진것을 볼 수 있다.

 

@ blur 적용 전.

 

@ blur 적용 후.

 

 

 

CSS 블러 필터 적용

효과를 적용하기 위해서는

계정의 톱니바퀴를 눌러 블로그 관리 설정에 들어간 후, 메뉴중 꾸미기 항목의 스킨 편집으로 들어가, html 편집, 그리고 css 에 들어가 코드가 있는 흰 공간을 한번 클릭하고 CTRL+F 로 검색창을 띄워 /* article-header 를 검색, 이곳에서 헤더에 관한 성질을 바꿀 수 있다. 내가 원하는 것은 배경에 블러를 주는 것이기 때문에 .article-header:before {} 안에 코드 backdrop-filter: blur(7px); 를 추가시켜 준다. 블러의 강도는 괄호 안 (7px) 와 같이 숫자로 지정해 주면 되고 0 이 지정되지 않았을 때이고 숫자가 커질수록 블러의 강도는 세진다.

 

블로그 관리 -> 스킨 편집 -> html 편집 -> CSS -> 검색창 소환

-> /* article-header -> .article-header:before {} -> backdrop-filter: blur(7px); 추가

 

 

 

 

다른 글에도 잘 적용되었음을 확인할 수 있다.