创建一个屏蔽Div

Question

我需要用html和css创建一些“masking div”。 我想要的是以下内容：

我正在使用jQueryUI，我希望能够仅在屏蔽div中拖动图像，如果图像超出#maskingDiv的范围，则该部分将隐藏在#maskingDiv之后

有什么想法吗？ 谢谢你的推荐。

Answer 1

我认为你倒退了。屏蔽div可能比图像小。如果您希望屏幕中包含overflow:hidden标记，则屏幕将具有固定的宽度和高度<img />。然而，更容易做到这一点，将图像作为background-image的{​​{1}}并应用偏移的背景 - 位置

Answer 2

你是说你想要与面具有某种边界？像一个相框或什么？如果您只想裁剪图像定义显式高度和宽度，然后使用溢出隐藏。

如果你想要某种掩蔽框架，这可能有用......我没有使用jQuery UI drop和drag，但我猜测一个好方法是为元素创建一个伪元素你希望将图像拖入。

伪元素实际上不在DOM中，因此希望不会导致拖放任何问题。

有点像这样...

img#drop {
 width:200px;
 height:200px;
 position:relative;
 overflow:hidden;
}

img#drop:after {
 content:'';
 position:absolute;
 top:0;
 left:0;
 width:200px;
 height:200px;
 background:url('mask.png') no-repeat;
}

也许让小提琴来测试它？