本文介绍了将一个图像移到另一图像内的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

背景

我允许用户在蒙版图像中上传图像....

I am allowing user to upload an image inside mask image....

用户上传图片后,我会在蒙版图片内填充用户上传图片:

Once user upload image, I am filling user uploaded image inside mask image :

1.蒙版图像:

2.用户上传的图片:

3. 用户在蒙版上上传图像 [最终图像]:

3.User uploaded image on mask [Final image ] :

Codepen: https://codepen.io/kidsdial2/pen/OdyemQ

JSfiddle: http://jsfiddle.net/2xq8p0zy/

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;
}

要求:

我想提供一个选项,使将用户上传的图像移动到蒙版图像中,如下所示:

I want to give an option to move the user uploaded image inside mask image as in this fiddle :

http://jsfiddle.net/aLcb4sb5/链接

问题:

但在网站两个图像都在移动....

but currenly in website both images are moving....

推荐答案

我对您的设计进行了一些更改.这是对html和CSS的一个小的更改.新的html布局就是这样

I made a few changes to your design. its a small change to the html and css.The new html layout is like this

  <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

where image-holder div is the mask image and the image inside it, is the user uploaded image

我制作了一个演示,在这里

要进行可拖动的工作,请注意,您需要安装jQuery.ui,并且我认为您已经在网站中使用它了.

Note for draggable to work you need jQuery.ui installed, and I think that you already using it in your site.

这篇关于将一个图像移到另一图像内的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 01:21
查看更多