티스토리 블로그 : 포스팅 제목 배경 / 투명도 조절, 블러 효과주는 방법

 

티스토리블로그 : 포스팅 제목 배경 / 투명도 조절

제목 배경의 투명도를 조절하는 방법은 '스킨편집'을 통해 가능합니다. 경로는 다음과 같습니다.

• 블로그 관리 → 꾸미기 / 스킨 편집 → HTML 편집 → CSS 
• CSS 본문 아무데나 클릭 → CTRL+F 
  검색어: .post-cover:before { 
  * 동일한 검색어가 있을 시 다음을 탐색할 떄, ENTER 치면 안됩니다. 수정될 수 있습니다.
    CTRL+G로 넘길 수 있습니다.
  
  
• .post-cover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.65);
  }

빨강 초록 파랑 투명도 
투명도 퍼센트를 소수점으로 나타내고 있습니다.
0일때 0% ~ 1일때 100% 입니다.
아래의 예시를 보시고 원하시는 투명도로 고치신 후에, 오른쪽 상단의 적용을 눌러주세요.

 

 

---

1. 투명도 조절 예시 : 0 일때

2. 투명도 조절 예시 : 0.25 일때

3. 투명도 조절 예시 : 0.5 일때

4. 투명도 조절 예시 : 0.75 일때

5. 투명도 조절 예시 : 1 일때

 

저는 투명도 0.6로 설정했습니다.

 

---

티스토리 블로그 : 포스팅 제목 배경 / 블러효과 적용

여기서 끝내지 않고, 블러 적용을 해보겠습니다. 배경을 블러처리해서 제목에 더 집중할 수 있는데요.

• .post-cover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.65);
  }

에서 background-color 아래에 backdrop-filter: blur(8px); 을 추가해줍니다. 

• .post-cover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  }

그러면, 완성!

---

아래는 블러 수치에 따른 예시 입니다.
backdrop-filter: blur(8px);

1. 블러 조절 예시 : 0 일때

 

2. 블러 조절 예시 : 5 일때

 

3. 블러 조절 예시 : 10 일때

 

4. 블러 조절 예시 : 15 일때

티스토리 블로그 제목 배경의 원하시는 블러수치를 적용해주세요.

---

티스토리 블로그 : 포스팅 제목 글자 크기 조절 방법

 

경로는 다음과 같습니다.

• 블로그 관리 → 꾸미기 / 스킨 편집 → HTML 편집 → CSS 
• CSS 본문 아무데나 클릭 → CTRL+F 
  검색어: .post-cover:before { 
  * 동일한 검색어가 있을 시 다음을 탐색할 떄, ENTER 치면 안됩니다. 수정될 수 있습니다.
    CTRL+G로 넘길 수 있습니다.
  
  
• .post-cover h1 {
  max-width: 1080px;
  margin: 0 auto;
  font-weight: 300;
  font-size: 2.2em; /*제목 사이즈*/
  line-height: 1.2352;
  color: #fff;
  }

저 폰트사이즈를 키우고 줄여보시면서 원하시는 크기로 적용해보세요^^

 

티스토리 블로그의 공감과 댓글은 로그인이 필요하지 않습니다.
블로그 포스팅 맨 아래로 내리시면 댓글창 있습니다. 그냥 적으시면 돼요 ( ´͈ ꇴ `͈ )੭⁾⁾·°