CSS 로 멋진 이미지 오버레이 만들기

소개

이 랩에서는 CSS 프로그래밍의 세계를 탐구합니다. 이 랩의 목적은 CSS 와 웹 개발에서의 역할을 더 잘 이해하도록 돕는 것입니다. HTML 요소를 스타일링하고, 다양한 유형의 CSS 선택자를 적용하며, CSS 를 사용하여 반응형 레이아웃을 만드는 방법을 배우게 됩니다.

텍스트 오버레이가 있는 이미지

index.html과 style.css는 이미 VM 에 제공되어 있습니다.

텍스트 오버레이가 있는 이미지를 표시하려면 <figure> 및 <figcaption> 요소를 사용하십시오. CSS 에서 linear-gradient 속성을 사용하여 이미지 위에 오버레이 효과를 만듭니다. 다음은 예시 코드 조각입니다.

<figure class="text-overlay-image">
  <img src="https://picsum.photos/id/971/400/400.jpg" />
  <figcaption>
    <h3>Business <br />Pricing</h3>
  </figcaption>
</figure>

.text-overlay-image {
  box-sizing: border-box;
  position: relative;
  margin: 8px;
  max-width: 400px;
  max-height: 400px;
  width: 100%;
}

.text-overlay-image figcaption {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%);
  color: #fff;
  padding: 16px;
  font: 700 28px/1.2 sans-serif;
}

.text-overlay-image figcaption h3 {
  margin: 0;
}

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

텍스트 오버레이가 있는 이미지

소개

텍스트 오버레이가 있는 이미지

요약