Создать маскирующий Div

Question

Мне нужно создать с помощью html и css, что-то вроде «маскирующего div». То, что я хочу, это следующее:

Я использую jQueryUI, я хочу иметь возможность перетаскивать изображение только внутри маскирующего элемента, чтобы, если изображение выходит за пределы #maskingDiv, этот раздел будет скрыт за #maskingDiv .

Есть идеи? Спасибо заранее!

Answer 1

Я думаю, что у вас это задом наперед.Маскирующий элемент, вероятно, будет меньше, чем изображение.Маска будет иметь фиксированную ширину и высоту и overflow:hidden, если вы хотите, чтобы внутри нее был тег <img />.Однако проще было сделать это, поместив изображение как background-image из #maskingDiv и применив смещенный background-postiion

Answer 2

Вы имеете в виду, что вы хотите какую-то границу с вашей маской?Как рамка для фотографий или что-то?Если вы просто хотите обрезать изображение, определите явную высоту и ширину, а затем используйте скрытое переполнение.

Если вам нужна какая-то маскирующая рамка, это может сработать ... Я не использовал перетаскивание и перетаскивание пользовательского интерфейса jQuery, но я предполагаю, что хорошим способом сделать это будет создание псевдоэлементадля элемента, в который вы хотите перетащить изображение.

Псевдоэлементы в действительности отсутствуют в 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;
}

Может быть, сделать скрипку, чтобы проверить это?