이미지 텍스트 오버레이: CSS backdrop 필터로 가독성 향상

소개

이 랩에서는 CSS 를 사용하여 이미지 위에 텍스트를 오버레이하는 방법에 대해 배우겠습니다. 이 랩의 목적은 배경 이미지와 색상에 관계없이 텍스트를 읽을 수 있도록 이미지 위에 텍스트를 표시하는 방법을 가르치는 것입니다. backdrop-filter 속성을 사용하여 텍스트에 blur 및 brightness 효과를 적용하는 방법을 배우고, 전문적이고 시각적으로 매력적인 디자인을 만들 수 있습니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

이미지 텍스트 오버레이

index.html 및 style.css는 이미 VM 에 제공되었습니다.

이미지 위에 텍스트를 오버레이하여 표시하려면 backdrop-filter 속성을 사용하여 blur(14px) 및 brightness(80%) 효과를 적용하십시오. 이렇게 하면 배경 이미지와 색상에 관계없이 텍스트를 읽을 수 있습니다. 다음은 HTML 코드의 예입니다.

<div>
  <h3 class="text-overlay">Hello, World</h3>
  <img src="https://picsum.photos/id/1050/1200/800" />
</div>

그리고 해당 CSS 코드입니다.

div {
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem;
  font-size: 2rem;
  font-weight: 300;
  color: white;
  backdrop-filter: blur(14px) brightness(80%);
}

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 이미지 텍스트 오버레이 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.