이전 글에서는 배경 이미지를 병합하는 방법을 소개했습니다. 그러나 배경 이미지뿐만 아니라 전경 이미지도 병합할 수 있습니다.
구글 검색결과 페이지에서 로고 아이콘을 마우스 오른쪽 버튼으로 클릭하고 다른 이름으로 저장해 보면 단순한 구글 로고가 아닌 복잡한 패치워크 이미지임을 알 수 있습니다.
검색 페이지의 소스 코드를 확인하세요. 코드의 로고 부분은 다음과 같습니다.
예제 소스 코드
[www.downcodes.com] <a id=logo href="/u/info_img/2009-06/24/nav_logo4.png" alt=""></a>
코드의 CSS 부분은 다음과 같습니다.
예제 소스 코드
[www.downcodes.com] #logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}
#logo img{border:none;position:absolute;left:-0px;top:-26px}
위 코드를 분석하면 CSS에서 id=logo인 스타일 상위 요소는 상대 위치 지정을 채택하고 너비와 높이를 정의하며 Overflow:hidden을 사용하여 오버플로 부분을 숨기는 반면 img 요소는 왼쪽 및 위쪽을 사용하여 절대 위치 지정을 채택합니다. 이미지 위치 지정을 위해, 이는 배경 이미지의 위치 지정과 일치합니다.
