溢出隐藏着不同的元素

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

您可以将图像设置为

，而不是拖动div

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-index问题，如果您希望框架位于顶部，则为其提供更高的z-index。

例如：

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

然后看着你添加了问题的jsfiddle，它使用了一个png，所以也许图像本身有轻微的不透明度。也许如果您以100％不透明度重新保存图像，您可能会获得您期望的实体框架。