다른 이미지 위에 10x10px 이미지를 오버레이하려면 어떻게해야합니까?

Question

내 웹 사이트에 사용자 아바타가 있습니다. 간단한 이미지 태그 :

<img src="foo.jpg" class="userphoto" width="48" height="48" alt=""> 

지금, 내가 플로트 이미지에 원하는 (페이스 북 아이콘 - 10x10px) 이미지의 왼쪽 상단 모서리에이 이미지를 통해.

사용자가 Facebook에 인증되었음을 나타냅니다.

어떻게하면됩니까? 이미지 태그의 CSS 스타일링, 또는 절대 위치 지정을 사용하여 별도의 div가 있어야합니까?

투명 할 필요는 없으며 정확히 왼쪽 위 모서리에 정확히 위치해야합니다.

페이스 북의 상태에 따라 이미지를 동적으로 오버레이할지 여부를 결정해야하므로 물론 물리적으로 이미지를 수정할 수 없습니다. 하지만 동적으로 CSS 클래스를 추가하려면 바랬습니다.

아이디어가 있으십니까?

답변 :

두 답변의 조합으로 작업을 얻었다. 다른 이미지 대신 div를 사용했습니다.

HTML :

<div class="foo"> 
    <div class="fboverlay"></div> 
    <a> 
     <img src="foo.jpg" class="userphoto" width="48" height="48" alt=""> 
    </a> 
</div> 

CSS : 도움을

.foo 
{ 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

.fboverlay 
{ 
    background-image: url('/image/facebook/logo.gif'); 
    position: absolute; 
    z-index: 1; 
    top: 10px; 
    left: 10px; 
    width: 10px; 
    height: 10px; 
} 

감사합니다.

Answer 1

내가 원하는 정확한 치수를 사용하지 않는다는 것을 알고 있지만, 여기에 대한 실례가 있습니다. (당신은 메인 사진의 크기로 사업부 ".main_photo"부모가 필요합니다.)

.main_photo{ 
 
    position:relative; 
 
    width:80px; 
 
    height:80px 
 
} 
 
.inlay{ 
 
    position:absolute; 
 
    top:5px; 
 
    right:5px 
 
}

<div class="main_photo"> 
 
    <img src="https://secure.gravatar.com/avatar/?s=200&d=mm&r=pg" /> 
 
    <img class="inlay" src="https://www.rit.edu/news/lib/views/public/images/dateline_images/facebook_icon.gif" /> 
 
</div>

Answer 2

처음에는 position입니다. 보통은 상대적이거나 절대적입니다.

두 번째로, 다른 배치 된 요소가있는 경우 반드시 z-index을 설정해야합니다 (꼭 필요한 것은 아님).

top/left 또는 bottom/right 조합을 사용하면 이미지를 다른 레이어 위에 겹쳐서 표시 할 수 있습니다.

이것은 html/css를 보지 않고 조언합니다. 그것은 분명히 상황에 따라 다를 것입니다.

#el-on-top { position:absolute; top:0; left:0; z-index:1; } 

당신은 대신 말의, position:relative이 때문에 AP'd 요소의 상단 뭔가를 기준으로 설정하는 래퍼 또는 전체 페이지를해야 할 수도 있습니다.