위치없이 동적으로 채워진 div에 이미지 오버레이 : 절대

나는 이것을 할 방법이 있어야한다는 것을 알고 있습니다. 여기 내 문제가있다. 컨테이너 div 안에있는 div를 동적으로 채 웁니다. 동적으로 채워진 div는 이미지에 의해 전달되며 display: inline으로 설정되어 있으므로 멋지게 정렬됩니다. 내가 할 수없는 일은 동적 div에 오버레이를 추가하는 것입니다. 위치없이 동적으로 채워진 div에 이미지 오버레이 : 절대

<div id="container" style="width:800px"> 
    <div class="dynamic"><a href="#"><img src="" alt="" /></a></div> 
    <div class="dynamic"><a href="#"><img src="" alt="" /></a></div> 
    <div class="dynamic"><a href="#"><img src="" alt="" /></a></div> 
</div>

내가 동적 된 div는 스크립트를 통해 전달되는 배경 이미지와 url 및 IMG와 스타일되어 있습니다 : 여기에 코드의 개요입니다. 내가하고 싶은 것은 해당 div에 적용 할 수있는 오버레이 이미지를 만드는 것입니다. position:absolute을 사용하면 순서가 지정된 목록에서 페이지를 가로 질러야하기 때문에 작동하지 않습니다. 당신이 볼 수 있듯이 예상대로, 정말 작동하지 않습니다 http://jsfiddle.net/Juccq/

여기에 코드의 비트입니다. 각각의 .dribble-shot을 잘 정리하고, .dllbble-shots-overlay에 각각 png를 적용 해보고 싶습니다. 이 코드는 하나의 인스턴스에서 작동하지만 곱 해지면 끊어집니다.

출처

2013-01-10 Anonymous

[jsfiddle] (http://jsfiddle.net)에서 피들을 만들거나 문제와 기대되는 결과를 보여주기 위해 필요한 CSS를 최소한 공유하십시오. – Passerby

"오버레이 이미지"란 정확히 무엇을 의미합니까? div의 배경으로 이미지를 배치 할 수 없습니까? – ATOzTOA

@Passerby는 약간의 코드로 편집했습니다. –

position:absolute;을 계속 사용할 수 있지만 CSS 속성 인 pointer-events:none;을 오버레이에 추가하기 만하면 IE 나 Opera에서는 작동하지 않습니다.

http://jsfiddle.net/5XqkP/는

(너무 CSS의 비트를 고정) 또는 대신 자바 스크립트의 비트와 함께 같은 것을 시도 할 수 :

http://jsfiddle.net/jt8bh/

출처

2013-01-10 08:44:05 luke

당신은 배경으로 오버레이 이미지를 사용할 수 있습니다 마우스를 올리면 인라인 이미지의 불투명도가 0으로 줄어 듭니다. 인라인 이미지는 위치를 유지하고 레이아웃을 손상시키지 않지만 오버레이 (실제로는 언더 레이) 이미지가 표시됩니다.

출처

2013-01-10 16:34:33 riverstorm

위치없이 동적으로 채워진 div에 이미지 오버레이 : 절대

답변

관련 문제