背景
我允许用户上传蒙版图像中的图像....
一旦用户上传图片，我就会在mask image 中填充user uploaded image :
1.蒙版图片 :
2.用户上传图片 :
3.用户上传的面具图片 [最终图片]:
代码笔:https://codepen.io/kidsdial2/pen/OdyemQ
JSfiddle:http://jsfiddle.net/2xq8p0zy/
HTML
<body>
<img src="http://139.59.24.243/images/invitations/birthday/a.jpg" alt="">
</body>
CSS
body {
background-color: #111;
color: #555;
font-size: 1.1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
margin: 20px auto;
display: block;
width: 100%;
height: 500px;
-webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-image/mask-image.png);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
要求:
我想提供一个选项来将用户上传的图像移动到蒙版图像中，就像在这个 fiddle 中一样:
http://jsfiddle.net/aLcb4sb5/或 link
问题:
但目前在 website两个图像都在移动......
最佳答案
我对您的设计做了一些修改。它对 html 和 css 的一个小改动。 新的html布局是这样的
<div class="image-holder">
<img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg" alt="">
</div>
其中 image-holder div 是 mask image 而里面的图像是 user uploaded image
我做了个demo看看here
请注意，要使 draggable 正常工作，您需要安装 jQuery.ui，而且我认为您已经在您的站点中使用了它。
关于html - 将一个图像移动到另一个图像中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54364232/