CSS 한 줄로 배경 이미지에 오버레이 추가하기

border-image를 사용해서 배경 이미지에 오버레이를 추가하는 방법

개요

배경 이미지 위에 글이 있는 경우, 글의 가독성을 높이기 위해 오버레이를 추가할 필요가 있다. 이를 한 줄의 css로 해결하는 방법을 알게 되어 정리한다.

구현 방법

예를 들어, 아래와 같은 Hero 섹션이 있다고 가정하자.

Hero 예시

<html>
  <head>
    <style>
      .hero {
        background-image: url('배경 이미지를 가져올 주소');
        background-size: cover;
        background-repeat: no-repeat;
        place-content: center;
        text-align: center;
      }
    </style>
  </head>
  <section class="hero">
    <h1>CSS 한 줄로 배경 이미지에 오버레이 추가하기</h1>
    <p>border-image를 사용해서 CSS 한 줄로 배경 이미지에 오버레이 추가하기</p>
  </section>
</html>

여기에 아래와 같이 overlay 라는 class를 만들어 추가해 준다. 예시이므로, gradient 의 값은 이미지에 따라 달라질 수 있다. 다만, 이미지 전체를 채우기 위해 fill 과 1 은 필요하다.

overlay 클래스

.overlay {
  border-image: linear-gradient(hsl(240 100% 50% / 0.3), hsl(0 100% 50% / 0.3))
    fill 1;
}

overlay 클래스를 만들었다면, Hero에 추가해준다.

Hero에 overlay 추가

<section class="overlay hero">
  <h1>CSS 한 줄로 배경 이미지에 오버레이 추가하기</h1>
  <p>border-image를 사용해서 CSS 한 줄로 배경 이미지에 오버레이 추가하기</p>
</section>

이제 Hero에 오버레이가 적용되어, 글의 가독성을 향상시킬 수 있다.

참고 영상: Youtube Link