텍스트 오버레이, 이미지 오버레이

1. 텍스트 오버레이란?

텍스트 오버레이는 이미지 위에 텍스트를 겹쳐서 보여주는 디자인 기법입니다. 이를 통해 이미지와 텍스트를 조화롭게

배치하여 정보 전달력을 높일 수 있습니다.

예시 코드

<div class="overlay-container">
    <img src="image.jpg" alt="Sample Image" class="overlay-image">
    <div class="overlay-text">
        <h1>여기에 제목을 넣으세요</h1>
        <p>설명을 추가하세요.</p>
    </div>
</div>

CSS 스타일

.overlay-container {
    position: relative;
    width: 100%;
    max-width: 600px;
}

.overlay-image {
    width: 100%;
    height: auto;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
    padding: 20px;
    border-radius: 10px;
}

 

 

 

2. 이미지 오버레이

이미지 오버레이는 두 개 이상의 이미지를 겹쳐서 보여주는 기법으로, 주로 배경 이미지 위에 색상 또는 다른 이미지를 덧씌워 시각적 효과를 극대화하는 데 사용됩니다.

예시 코드

<div class="image-overlay">
    <img src="background.jpg" alt="Background Image" class="background-image">
    <img src="overlay.png" alt="Overlay Image" class="overlay-image">
</div>

CSS 스타일

.image-overlay {
    position: relative;
    width: 100%;
    max-width: 600px;
}

.background-image {
    width: 100%;
    height: auto;
}

.overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0.5; /* 투명도 조절 */
}