用不同元素隱藏的溢出

Question

如果所述元素與其框架不同（即不是子元素），是否可以隱藏超出的元素（即照片）？

所以平時我們有框架元素及其子是這樣的：

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

但如果我需要這方面的情況完全相同的功能：

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

的例子： http://jsfiddle.net/t7EgU/2/

這是當前結果和我預期的結果： http://i44.tinypic.com/hs0yv8.jpg

有沒有辦法解決這個問題？

THX :)

Answer 1

而不是拖動d四，您可以設置圖像作爲

background-image 

和集

background-position 

到div內四處移動圖像。

在這個例子中，我有照片元素無形和「窗口」我創造了賽吧

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

Answer 2

如果您需要只支持現代瀏覽器，您可以使用:not(:empty)，像這樣

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

一個簡單的使用演示：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％的不透明度重新保存圖像，你可能會得到你期待的穩固框架。