Question

如何在我的代码中添加叠加层。

<div class="demo">
    <div style="width: 300px; height: 91px; position: absolute; top: 148px; left: 12px;" class="resizable ui-draggable ui-resizable ui-draggable-disabled ui-state-disabled" id="resizable" aria-disabled="true">

    <div class="ui-resizable-handle ui-resizable-n"></div><div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div><div class="ui-resizable-handle ui-resizable-w"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001;"></div></div>
    <div class="zoomslide ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="display: block;"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a></div>
<div id="the_image" style="top: 12px; left: 12px; position: absolute;" class="ui-draggable"><div class="imgdiv" style="background: none repeat scroll 0% 0% red; height: 350px; width: 300px; overflow: visible;"><img width="334" height="350" src="images/lion-man.jpg" class="img1 image" id="first" style="position: relative; top: 0px; left: -17px;"></div></div></div>

我需要的是当点击裁剪按钮并显示完整图像时，它应该覆盖在白边框外面的图像部分。

我认为它应该创建div并在白边框之外设置不透明度，但我无法实现它。

应该是这样的：

function overlay(){
//codes here
}

请帮助。

http://deadwoodfilms.com/jquery/picture3/picture.html

Answer 1

尝试使用此尺寸：http://www.webresourcesdepot.com/jquery-image-crop-plugin-jcrop/如果不出意外，它会激发想法。

Answer 2

问题：

不幸的是CSS背景本质上是附加的，你可以覆盖一些东西来添加颜色，但你不能否定颜色。

解决方案一：

您需要做的是实际上有两个版本的图像。一个作为基础，覆盖覆盖。第二个作为选择（在叠加层的顶部），边缘被切掉。正确定位，用户永远不会知道他们正在看到两张图片。

您需要<img>（或带有背景的<div>加上两个<div>元素，其中一个元素与图像尺寸相同，另一个元素具有选区的尺寸。这三个都应该使用position: absolute;并包含在position: relative;的元素中。

第一个<div>将作为叠加层，只需给它一个漂亮的背景颜色，如果你想要它就是不透明度。

第二个<div>是神奇的。您将此<div>的背景设置为您的图片。

现在使用JS你可以调整`background-position：Xpx Ypx;'属性使得显示的图像部分与选择的位置匹配。

假设图像为500x500px，则选择为（100,100）。设置`background-position：100px 100px;'应该使它匹配，但可能需要进行一些调整以考虑您可能正在使用的任何边界。

显然，您的JavaScript还需要考虑图像大小的任何修改，因为这会导致选择对齐。

解决方案二：

您可以使用4个<div>元素，所有叠加层，使得图像顶部有一个<div>，底部有一个<div>，选择的每一侧有一个{{1}}。然后使用JavaScript动态调整那些{{1}}的大小，以考虑选择的大小。这将覆盖您选择之外的所有区域。

如何在我的图像上添加叠加层

2 个答案:

问题：

解决方案一：

解决方案二：