CSS를 사용하여 임의의 다른 이미지 위에 임의의 이미지 배치

Question

비슷한 질문이 몇 개 있지만 올린 사람이 내 상황을 해결하지 못했습니다.

각 항목을 자신의 사업부에 등록하고 싶습니다. 아이템이 팔리면 이미지를 완전히 가리지 않고 그러한 아이템 위에 투명한 "팔린"배너를 배치하고 싶습니다. 이 작업을 수행 할 필요없이 코드에서 "판매 된"배너를 추가하려면 다른 사람을 위임해야합니다. 따라서 방법이 간단할수록 좋습니다.

대부분의 경우이 사이트의 모든 솔루션은 절대적으로 위치한 div에 겹치는 배너 이미지를 만드는 것이 좋습니다. 보조 div에 img src가 포함되어 있습니다. 이것은 도우미를 혼란스럽게하는 훨씬 많은 코드처럼 보입니다.

투매형 배너가 배경이라면 의미가 있고 훨씬 쉽게 표시됩니다. 실수가 아니라면 기존 div에 추가 할 수있는 간단한 클래스 만 있으면됩니다. 예를 들어

<div><img src="folder/item3.png"></div> 

는 ... 따라서 SOLD 그래픽을 포함하는 제 DIV 페지 ...

<div><img src="folder/item3.png" class="sold"></div> 

된다. 나는 이것을 시도해 보았지만 제대로 작동하는 것처럼 보였지만 배너는 아이템 뒤에 완고하게 남아 있었고 Z- 인덱싱과 절대 위치 지정이 없다면 그것이 속한 곳을 벗어날 수 없었다. 실제로 전체 배치와 간섭하기 때문에 실제로 배치 할 수는 없습니다.

누군가가 문제를 해결하는 방법을 제안 할 수 있기를 바랍니다.

Answer 1

배경이 항상 그 아래에 있기 때문에 이미지가 포함 된 div의 배경을 사용할 수 없습니다. 제품 이미지 자체를 배경으로 설정하고 판매 된 그래픽을 이미지로 넣기를 원하지 않는 한.

내가해야 할 일은 먼저 이미지를 포함하는 div가 position : relative가되어야한다는 것입니다. 그런 다음 절대적으로 배치 된 판매 된 아이콘을 위해 다른 div를 그 안에 넣습니다. 위의 판매 된 아이콘을 z- 색인화하십시오.

예 : http://jsfiddle.net/z2V2B/1/

HTML

<div class="imgholder"><div class="soldicon"></div><img src="http://s3-us-west-2.amazonaws.com/hypebeast-wordpress/image/2009/07/huf-converse-product-red-skidgrip-1.jpg" width="250"></div> 

<div class="imgholder sold"><div class="soldicon"></div><img src="http://s3-us-west-2.amazonaws.com/hypebeast-wordpress/image/2009/07/huf-converse-product-red-skidgrip-1.jpg" width="250"></div> 

CSS

.imgholder {position:relative; z-index:1;} 

.soldicon {position:absolute; 
    z-index:2; 
    top:0; 
    left:0; 
width:177px; 
    height:138px; 
    background:url(http://www.flq.co.nz/images/icon-sold.gif) no-repeat top left; 
} 

.sold .soldicon {display:block!important;} 

.soldicon {display:none;} 

-30/05/14--

판매 된 라벨 이미지를 겹치는 경우 추가 - - 원래 다른 페이지와 연결된 페이지

... 판매 된 div도 이미지와 같은 위치에 링크가 있도록 코드를 둡니다. 그런 다음 CSS를 추가

.soldicon a {text-indent:-9000px; display:block; width:100%; height:100%;} 

이것이 텍스트가 판매 아이콘 사업부의 전체 폭과 높이가 페이지를 들여되기 때문에 (보이지 않는 링크를 만들 수있다 할 것입니다 - 그것은 끊김없이 같은 것 전체 이미지를 다시 클릭 할 수 있고 판매 된 아이콘으로 가려지지 않는 경우