jquery - 用不同的元素隐藏溢出

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

有没有办法解决这个问题？

谢谢 ：）

Answer 1

您可以将图像设置为

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% 的不透明度重新保存图像，您可能会得到您期望的实心框架。