배경 이미지를 오버레이하는 방법

나는 오늘 두 가지 멋진 트릭을 배웠고, 그에 대한 짧은 기사를 작성해야겠다고 생각했습니다.

도전

종종 우리는 텍스트를 맨 위에 올려 놓는 배경 이미지를 가지고 있습니다. 예를 들어 영웅 섹션 또는 기본적으로 요즘 모든 마케팅 사이트의 스크롤 없이 볼 수 있는 콘텐츠가 될 수 있습니다.

때로는 텍스트와 배경 이미지 간의 대비를 개선해야 합니다. 물론, 이미지 자체를 변경할 수도 있지만 때로는 선택 사항이 아닌 경우도 있습니다.

낡고 투박한 방식 👴

이 문제를 해결하는 방법은 여러 가지가 있지만 이것이 제가 예전에 배운 방법입니다. 나는 일반적으로 다음 HTML 구조를 만듭니다.

<div class="image-box">
  <div 
    class="image-box__background" 
    style="--image-url: url('some-image.jpg')"
  ></div>
  <div class="image-box__overlay"></div>
  <div class="image-box__content">
    <h1>Buy our product</h1>
  </div>
</div>

그런 다음 image-box를 상대적으로 배치하고 모든 어린이는 절대적으로 내부에 배치하고 원하는 순서대로 쌓습니다.

--구문이란 무엇입니까?

Note that we're passing in the image url via something called CSS Custom properties. You might also know them as CSS variables. It's a way to pass values between our HTML and CSS. You can read more about CSS Custom properties on MDN.

스타일을 지정하는 데 필요한 스타일은 다음과 같습니다.

/* 
The container box is relative so we can position stuff inside of it 
*/
.image-box {
  position: relative;
}

/*
The background and overlay need to be absolutely positioned
*/
.image-box__background,
.image-box__overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/* 
The background image div sizes and positions the background itself.
It's also at the bottom-most position in our "div stack" (z-index 1)

We set the image url via a CSS custom property, that's set via the style attribute in our HTML
*/
.image-box__background {
  background: var(--image-url) center center no-repeat;
  background-size: cover;

  z-index: 1
}

/* 
The overlay div is just a colored element with some opacity.
It's above the background image in our stack, so it appears to 
darken the image 
*/
.image-box__overlay {
  background: rgba(0, 0, 0, 0.5);

  z-index: 2;
}

/* 
The content div is at the top of our stack. 
We'd probably add some padding or flexbox properties here as well, 
to place the content appropriately
*/
.image-box__content {
  position: relative;

  z-index: 3;

  /* Finally, style and place the content */
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

많은 코드가 있지만 꽤 잘 작동합니다. 다음은 이를 구현하는 CodePen입니다.

새로운 멋진 방법! 😎

많은 코드였습니다. 그렇게 될 필요는 없습니다.

HTML을 다음과 같이 변경해 보겠습니다.

<div class="image-box" style="--image-url(some-image.jpg)">
  <h1>Buy our product</h1>
</div>

좀 더 간단해 보이죠? CSS도 구현해 보겠습니다.

.image-box {

  /* Here's the trick */
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) , var(--image-url) center center;
  background-size: cover;

  /* Here's the same styles we applied to our content-div earlier */
  color: white;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

다음은 이를 구현하는 CodePen입니다.

무슨 일이야?

눈치채셨겠지만 이제 두 개의 배경 이미지를 지정합니다.

.image-box {
  background-image: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
    var(--image-url);
}

첫 번째 배경 이미지는 동일한 색상에서 동일한 색상으로 이동하는 선형 그라디언트입니다. 이 색상은 두 번째 배경의 오버레이로 작동하는 반투명 검정입니다.

그리고 그게 정말이야. 영리하다고 느끼면 추가 사용자 정의를 위해 두 번째 CSS 변수로 원하는 어둡게 하는 양을 전달할 수도 있습니다. 또는 실제 그라디언트를 사용하여 이미지를 좀 더 돋보이게 만들 수 있습니다.

상자 그림자를 사용하여 동일한 결과 얻기

CSS에는 배경 이미지 위에 "메타 콘텐츠"를 레이어링하는 여러 가지 방법이 있습니다. 이를 달성하는 또 다른 방법은 스프레드 값이 큰 box-shadow 속성과 inset 설정을 사용하는 것입니다.

.image-box {

  /* Here's the trick */
  box-shadow: inset 0 0 0 100vw rgba(0,0,0,0.5);

  /* Basic background styles */
  background: var(--image-url) center center no-repeat;
  background-size: cover;

  /* Here's the same styles we applied to our content-div earlier */
  color: white;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

다음은 이 구현이 포함된 CodePen입니다.



이것은 우리가 애니메이션을 할 수도 있는 무언가를 제공합니다(이미지를 가리키면 어떤 일이 발생하는지 주목). 이는 멋진 UX 즐거움이 될 수 있습니다. 그러나 그라디언트에 대해 동일한 제어 권한이 없으므로 선택해야 하는 기술은 디자인 컨텍스트에 따라 다릅니다. 또한 이 기술은 특히 저가형 장치에서 성능이 좋지 않을 수 있습니다. 기술을 결정할 때 이 점을 고려하십시오.

제 DEV 강연에 와주셔서 감사합니다.