다른 요소로 오버플로 된 오버플로

Question

해당 요소가 해당 프레임에서 다른 요소 (즉 자식 요소 아님) 인 경우 초과 요소 (예 : 사진)를 숨길 수 있습니까?

그래서 일반적으로 우리는 프레임 요소와 자식이 같은 있습니다 http://jsfiddle.net/t7EgU/2/

다음 예를 들어

<div id="frame"> 
</div> 
<img src="xyz" /> 

:

<div id="frame"> 
    <img src="xyz" /> 
</div> 
with css: 
#frame {overflow:hidden;} 

하지만를 나는이 상황에 동일한 기능을 필요로하는 경우

이것은 현재 결과이며 예상 결과는 다음과 같습니다. http://i44.tinypic.com/hs0yv8.jpg

이 문제를 해결할 방법이 있습니까?

들으 :) 당신은 현대적인 브라우저를 지원해야하는 경우

Answer 1

d를 드래그하는 대신 IV, 당신은 사업부 내 주변의 이미지를 이동할

background-image 

및 집합은

background-position 

으로 이미지를 설정할 수 있습니다. 이 예에서

, 내가 가지고있는 사진 요소 보이지 않는과 "창"나는 사진을 보면 경기 그것은

http://jsfiddle.net/t7EgU/16/

Answer 2

가 그렇게

#frame:not(:empty) { 
    overflow: hidden; 
} 

처럼, 간단한 사용 데모 :not(:empty)을 사용할 수 있습니다 : http://jsbin.com/egatij/1/edit

Answer 3

또는 사용 JQuery와 :

을

if ($('#frame').children().length != 0)) 
$(this).css('overflow': 'hidden'); 

Answer 4

을 만들어이 간단한 z 축이 될 수 게시 프레임이 최상위에오고 싶다면 더 높은 z- 인덱스를 제공하십시오. 예를 들어

:

#frame { position:relative; z-index: 2;} 
img { position:relative; z-index:1;} 

그러나 당신이 당신의 질문과 함께 추가 jsfiddle보고는, 그것은 PNG를 사용은 어쩌면 이미지 자체에 약간의 불투명도가있다. 100 % 불투명도로 이미지를 다시 저장 한 경우 아마도 예상했던 견고한 프레임을 얻을 수 있습니다.