HTML 파일의 이미지에 십자 기호 만들기

Question

내 페이지에 이미지가 있습니다. 일부 자바 스크립트 트리거 이벤트 후 이미지에 십자 표시가 나타납니다. 이미지는 계속 표시되지만 십자가가 맨 위에 표시됩니다.

적절한 대안은 무엇입니까? (HTML5 캔버스를 사용하는 비슷한 질문이 here입니다.)

Answer 1

나는 이미지와 십자가에 대한 래퍼를 만들고 래퍼 내에 절대적으로 배치했습니다. 래퍼 자체는 DOM 내에서 유동적이지만 이미지와 십자가는 십자가가 이미지 위에 표시되도록 절대 배치됩니다. 이것은 래퍼의 position 속성을 relative로 설정하고 하위에 절대 위치 지정을 사용하여 수행 할 수 있습니다.

십자가는 이미지를 사용합니다. 이렇게하면 높이와 너비를 100 %로 설정할 수 있으므로 래퍼와 함께 늘어납니다. 크기 조정을 제어하려면 이미지 자체가 아니라 래퍼 요소의 너비/높이를 설정하십시오.

HTML

<div class="wrapper"> 
    <img class="img" src="actual-image.jpg" /> 
    <img class="cross-img" src="cross-image.jpg" /> 
</div> 

CSS 그것은 표시하거나 십자가를 숨기기 위해 다음 사소한

.wrapper { 
    position:relative; 
    width: 150px; 
    height: 150px; 
} 

.img, .cross-img { 
    position: absolute; 
    top: 0px; 
    left: 0px; 

    width: 100%; 
    height: 100%; 
} 

.cross-img { 
    opacity: 0.5; 
} 

. 여기

$('.cross-img').hide(); 

jsfiddle이를 시연 : http://jsfiddle.net/J69qR/