제작 방법: 투명 텍스트 이미지

CSS를 사용하여 투명(반투명) 배경 텍스트를 가진 이미지를 만들어 보세요.

투명 이미지 텍스트

노르웨이
제목

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

직접 시도해보세요

투명 이미지 텍스트를 어떻게 만드는가

第一步 - HTML 추가:

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>제목</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

第二步 - CSS 추가:

.container {
  position: relative;
  max-width: 800px; /* 최대 너비 */
  margin: 0 auto; /* 중앙에 배치 */
}
.container .content {
  position: absolute; /* 배경 텍스트 정위치 */
  bottom: 0; /* 하단에 위치. top:0를 사용하여 상단에 고정 */
  background: rgb(0, 0, 0); /* 대체 색상 */
  background: rgba(0, 0, 0, 0.5); /* 투명도 0.5의 검은 배경 */
  color: #f1f1f1; /* 회색 텍스트 */
  width: 100%; /* 전체 너비 */
  padding: 20px; /* 일부 내간격 */
}

직접 시도해보세요