다른 img 위에 img 오버레이

다음 HTML에서 해당 컨테이너 (div)의 왼쪽 위 모서리에 작은 삭제 아이콘을 표시하고 싶습니다. 큰 이미지 (고양이)는 div의 높이를 초과하지 않도록 div와 scale 내부에 있어야합니다. div가 다른 곳에서 어떻게 사용 되었기 때문에 왼쪽으로 떠 있어야합니다. 삭제 아이콘은 큰 이미지 위에 겹쳐서 표시됩니다 (큰 이미지가 div의 너비를 채우는 경우). 큰 이미지의 너비는 div보다 훨씬 작을 수 있으며 div의 가운데에 배치됩니다. 이 경우 삭제 아이콘은 여전히 왼쪽 위 모서리에 있지만 큰 이미지가 너무 작아서 큰 이미지 위에 실제로 오버레이되지는 않습니다. div의 너비는 더 큰 이미지의 너비와 관계없이 항상 동일하게 유지됩니다. 여기 다른 img 위에 img 오버레이

내 HTML입니다 :

<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0"> 
    <img src="http://hellopune.mobi/site2/Images/icon_delete.png" /> 
    <img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" /> 
</div>

그리고 피들러의

: http://jsfiddle.net/AndroidDev/eJZ7X/

출처

2014-01-15 AndroidDev

이 같은 필요하십니까? 여기

Demo

div { 
    position: relative; 
} 

div img { 
    max-width: 100%; 
    max-height: 100%; 
} 

div img:first-of-type { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
}

는이 당신이 너무을 할 수있는 것보다 당신이 left를 원하는 경우, top 및 right 속성 absolute에img을 삭제하고 당신이 position: relative; 컨테이너 내부를 포장해야합니다 위치입니다 .

참고 : 당신이 당신의 DOM을 변경하지 않아도 first-of-type 의사를 사용하지만, 당신이 img의 순서가 보다 변경 될 수 있습니다이라고 생각하면 더 에 class가img을 삭제 지정할 수 있습니까 대신. 당신이 내 선택기가 너무 일반적입니다 느낌으로

, 당신은 .img_holder라는 class와 부모가 있다고 가정하고이 div 그래서 당신의 선택이 될 것입니다 더 중첩과 중첩 모두 그 안에 img보다해야합니다

.img_holder > div { 
    position: relative; 
} 

.img_holder > div > img { 
    max-width: 100%; 
    max-height: 100%; 
} 

.img_holder > div > img:first-of-type { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
}

그리고 DOM과 같을 것이다

<div class="img_holder"> 
    <div> 
     <img src="#" /> 
     <img src="#" /> 
    </div> 
    <div> 
     <img src="#" /> 
     <img src="#" /> 
    </div> 
    <div> 
     <img src="#" /> 
     <img src="#" /> 
    </div> 
</div>

출처

2014-01-15 09:30:46

당신은 또한뿐만 아니라 원래 바이올린에서 스타일링을 많이 제거 할 수 있습니다 http://jsfiddle.net/crazytonyi/eJZ7X/3/ – Anthony

그 것처럼 보입니다. 대신 오른쪽 위의 삭제 버튼을 사용하여 살 수 있습니다. 나는 아직도 문제가있다.각 요소에 나열된 CSS와 CSS를 결합하는 방법을 잘 모르겠습니다. 스타일을 사용하려면 여러 div에 대해 반복해야하기 때문에 스타일을 사용해야합니다. 매우 일반적인 것으로 작성했습니다. 내 스타일을 너의 것으로 옮기고 각 이름을 지어 주실 수 있겠습니까? 미안 해요,하지만 어떻게 해야할지 모르겠군요. – AndroidDev

@Anthony Ya 고마워요. 인라인 스타일은 항상 짜증이 났어요. –

나는 당신의 바이올린을 업데이트했습니다. here

아이콘 img는 이제 아이콘 클래스를 가지며 div에 절대 위치합니다.

HTML :

<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0"> 
    <img class="icon" src="http://hellopune.mobi/site2/Images/icon_delete.png" /> 
    <img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" /> 
</div>

CSS :

.icon { 
    position: absolute; 
}

출처

2014-01-15 09:32:16 donnywals

다른 img 위에 img 오버레이

답변

관련 문제