이미지 위에 이미지 오버레이 - imiji wie imiji obeolei

Question

지도 이미지를 사용하면 원래 지도에 별도의 항목 삽입 없이 정보를 추가할 수 있습니다.

목차 Show

지형 레이어 위에 오버레이 사용하기
이미지 속성 변경하기
이미지 오버레이 사용하기
1단계: 오버레이 만들기
2단계: 뷰어에 이미지 위치 맞추기
이미지 목록의 이미지 오버레이
이 문서의 내용
참고 항목
추가 리소스
추가 리소스
이 문서의 내용
DIV 위에 DIV 겹치기 활용 예제

오버레이 이미지 아래의 지도 이미지와 오버레이가 올바로 맞춰졌는지 확인하려면 먼저 뷰어에서 오버레이를 선택한 후 투명도를 변경해 완전히 불투명한 상태로 만듭니다.

지형 레이어 위에 오버레이 사용하기

오버레이가 지형과 통합되어 보다 자세한 정보가 표시됩니다.

이미지 속성 변경하기

주기적으로 바뀌는 이미지를 보고 있는 경우(예: 웹 이미지 등), 새로고침 빈도를 변경해 항상 최신 이미지가 표시되도록 할 수 있습니다.
보기 종류에 따라 이미지 업데이트가 필요한 경우, 새 위치로 3D 뷰어를 이동할 때마다 이미지를 새로고침하도록 설정합니다.

여러 이미지 오버레이를 순서대로 중첩해야 할 경우, 이미지의 그리기 순서를 변경해 오버레이 순번이 높을수록 위에 표시되도록 지정할 수 있습니다.

이미지 오버레이 사용하기

지도의 일부분에 이미지 오버레이를 사용하면 추가 세부정보를 함께 표시할 수 있습니다.

1단계: 오버레이 만들기

Google 어스 프로를 엽니다.
오버레이 이미지를 설정할 장소에 3D 뷰어를 위치시킵니다. 뷰어의 위치는 오버레이의 보기 고도와 일치하도록 맞춥니다. 비율을 확대하면 자세한 오버레이 이미지를 볼 수 있고, 축소하면 넓은 지역을 볼 수 있습니다.
추가
이미지 오버레이를 클릭합니다.
이름을 입력합니다.
이미지를 업로드합니다.
- 사용하려는 이미지 파일의 URL(웹페이지 URL 아님)을 '링크' 옆에 입력합니다.
- 컴퓨터 또는 네트워크 위치에서 파일을 업로드하려면 찾아보기를 클릭합니다. 이미지가 위치 지정에 쓰이는 앵커 포인트와 함께 3D 뷰어에 표시됩니다.
설명을 입력합니다.
새로고침을 클릭해 오버레이 이미지의 새로고침 속성을 설정합니다.
참고: 서버에서 자동 업데이트되는 이미지에는 새로고침 속성을 설정해야 합니다.
슬라이더를 이용해 이미지에 적용할 기본 투명도를 설정합니다.
참고: 오버레이 이미지와 그 아래의 지구 사진이 모두 잘 보이도록 투명도를 조절하면 오버레이 위치를 보다 쉽게 맞출 수 있습니다.
보기 설정을 변경하려면 보기를 클릭합니다.
필요에 따라 뷰어 상의 이미지 위치를 적절히 추가로 조절합니다. 그런 다음 확인을 클릭해 만들기를 완료합니다.

2단계: 뷰어에 이미지 위치 맞추기

아이콘을 사용하면 이미지 크기를 조절하거나 위치를 옮겨 지도 상의 원하는 지점에 맞출 수 있습니다. 예를 들면 다음과 같습니다.

지구본에서 전체 오버레이를 밀고 중심으로부터 위치를 지정하려면 가운데 십자선 아이콘을 사용합니다.
이미지를 회전하려면 삼각형 아이콘을 사용합니다.
선택한 모서리를 늘리거나 기울이려면 모서리 십자선 아이콘을 사용합니다.
팁: Shift를 누른 상태로 아이콘을 클릭하면 이미지 중앙을 기준으로 크기를 변경할 수 있습니다.

4개의 측면 앵커를 사용하면 선택한 면의 안쪽이나 바깥쪽으로 이미지를 늘릴 수 있습니다. 중앙을 기준으로 이미지 크기를 변경하려면 Shift를 누릅니다.

도움이 되었나요?

어떻게 하면 개선할 수 있을까요?

이미지를 편집해서 세개로 나누신다음 다음과 같이 작업하시면 될것 같습니다

<style>

.img_box:after{content:''; display : table; clear : both; }

.img_wrap{float : left; }

.text_wrap{float:left;}

</style>

</div>

작성할 텍스트

</div>

주요 콘텐츠로 건너뛰기

이 브라우저는 더 이상 지원되지 않습니다.

최신 기능, 보안 업데이트, 기술 지원을 이용하려면 Microsoft Edge로 업그레이드하세요.

이미지 목록의 이미지 오버레이

아티클
09/26/2022
읽는 데 2분 걸림

이 문서의 내용

모든 이미지 목록(CImageList)에는 오버레이 마스크로 사용할 이미지 목록이 포함됩니다. "오버레이 마스크"는 다른 이미지 위에 투명하게 그려진 이미지입니다. 모든 이미지를 오버레이 마스크로 사용할 수 있습니다. 이미지 목록당 최대 4개의 오버레이 마스크를 지정할 수 있습니다.

SetOverlayImage 멤버 함수, 이미지의 인덱스 및 오버레이 마스크의 인덱스를 사용하여 이미지의 인덱스를 오버레이 마스크 목록에 추가합니다. 오버레이 마스크의 인덱스는 0부터 시작하는 것이 아니라 1부터 시작합니다.

에 대한 단일 호출 Draw을 사용하여 이미지 위에 오버레이 마스크를 그립니다. 매개 변수에는 그릴 이미지의 인덱스와 오버레이 마스크의 인덱스가 포함됩니다. 오버레이 마스크의 인덱스를 지정하려면 INDEXTOOVERLAYMASK 매크로를 사용해야 합니다. DrawIndirect 멤버 함수를 호출할 때 오버레이 이미지를 지정할 수도 있습니다.

참고 항목

CImageList 사용
컨트롤

추가 리소스

이 문서의 내용

기획전 페이지 퍼블리싱을 해 두었는데 일부 기획전에 마감 처리를 해야 해서 div 위에 div를 겹쳐 올리는 방식으로 기획전 조기 마감을 표현했다. CSS position 속성을 이용하면 손쉽게 div 위에 div를 겹쳐 보이게 할 수 있다. 기본 원리는 아래와 같다.

<div style="position:relative'">
  <div style="position:absolute; top:100px; left:100px">
  </div>
<div>

이제부터 아래 깔리는 div를 부모 div 라고 하고 위에 올라가는 div를 자식 div 라고 지칭하겠다. 부모 div에 position:relative; 속성을 주고 자식 div에 position:absolute; 속성을 주는 방법이다. 활용해 보자!

DIV 위에 DIV 겹치기 활용 예제

부모 div 안에는 "안녕 친구하지 않을래" 라는 텍스트가 있고, 자식 div 안에는 "그래 친구하자" 라는 텍스트가 있다. 경계를 확인하기 위해 부모 div 에는 아쿠아 배경색상과 검정 테두리를 주었다. 자식 div의 경계는 블루 바이올렛 배경 색상으로 알 수 있으며, 투명도를 주어 글씨가 겹치는 부분을 확인할 수 있도록 하였다.

 <!-- 부모 div -->
    <div style="position:relative;height:100px;border:1px solid black;background-color:aqua;">

        <!-- 자식 div -->
        <div style="position:absolute;background-color:blueviolet;opacity:0.7;">
        <p>그래 친구하자</p>
        </div>

        <p style="color:black;"> 안녕 친구하지 않을래 </p>  

    </div>

각각 position 태그 속성을 relative와 absolute로 주면 아래와 같이 글씨가 겹치는 것을 확인할 수 있다.

나는 부모 div 테두리에서 일정 간격을 유지한 채로 자식 div가 보여지길 원했다. 부모 div에 padding 태그를 사용하여 내부 여백을 설정했다. 그리고 새로운 div를 만들어서 position:relative; 를 이동시켰다. 새롭게 부모가 된 div의 경계는 붉은색 테두리로 확인할 수 있다.

<!-- 원래 부모였던 div -->
    <div style="padding:10px;height:100px;border:1px solid black;background-color:aqua;">
        
        <!-- 새롭게 부모가 된 div -->
        <div style="position:relative;border:1px solid red;width:100%;height:100%;">

        <!-- 자식 div -->
        <div style="position:absolute;background-color:blueviolet;opacity:0.7;width:100%;height:100%;">
        <p>그래 친구하자</p>
        </div>

        <p style="color:black;"> 안녕 친구하지 않을래 </p>   

        </div>  
 
    </div>

아래와 같은 디자인(?)이 완성 되었다.

새로운 부모 div를 만든 이유는 기존의 부모 div가 가지는 padding을 인식하게 하기 위해서다. CSS position relative 와 absolute 속성을 이용하면 손쉽고 빠르게 div 위에 div를 올릴 수 있으니 정말 유용하다. 앞으로도 자주 이용할 것 같은 느낌적 느낌(!)이 든다.

CSS 이미지 겹치기 이미지 오버레이 프로그램 이미지 오버레이 뜻 이미지 위에 div