구글 블로그 Contempo 테마: 썸네일 이미지로 뒷배경 흐리게 블러 효과 주는 방법

구글 블로그 기본 테마인 Contempo 테마에서 썸네일 이미지를 블러(blur) 처리하여 배경이미지로 사용해봤습니다. 뒷배경이 있는 Contempo 테마에서 적용할 수 있습니다.

Contempo 테마 적용 방법

[테마] - [HTML 편집]에서 문서 내 검색 [Ctrl + F]으로 bg-photo-container를 검색합니다. 

<div class='bg-photo-container'>
  <div class='bg-photo'/>
</div>

위 3줄의 코드를 아래에 있는 코드로 대체합니다.

<!--<div class='bg-photo-container'>
  <div class='bg-photo'/>
</div>-->
<div class='bg-photo-container'>
  <b:if cond='data:view.isSingleItem'>
    <b:if cond='data:view.featuredImage'>
      <div class='bg-photo blur'>
        <style>
          .bg-photo.blur {
            background-image:url(<b:eval expr='data:view.featuredImage resizeImage 1600'/>);
            filter:blur(10px);
          }
        </style>
      </div>
    <b:else/>
      <div class='bg-photo'/>
    </b:if>
  <b:else/>
    <div class='bg-photo'/>
  </b:if>
</div>

저장 버튼을 클릭하면 적용이 완료됩니다.

블러 효과 주는 방법

  1. filter: blur()
    filter가 적용된 모든 자식 요소들까지 블러가 적용됩니다.
  2. backdrop-filter: blur()
    요소를 선택하면 그 뒤 영역에 blur 효과를 적용할 수 있는 속성입니다.

filter: blur(10px)으로 썸네일 이미지에 블러를 적용했습니다. 값이 클수록 이미지가 흐려집니다.

배경 이미지 설정하는 방법

background-image: url("image_url_here");

background-image는 배경이미지를 원하는 요소에 설정하는 방법입니다.

미리보기

미리보기

참고:
각 포스팅의 첫 번째 이미지가 썸네일 이미지입니다.

유용하기를 바랍니다.

댓글 쓰기