0

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

<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

4

2 回答 2

0

试试这个大小：http ://www.webresourcesdepot.com/jquery-image-crop-plugin-jcrop/ 如果不出意外，它会激发想法。

于 2012-05-05T04:32:21.107 回答
0

问题：

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

解决方案一：

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

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

第一个<div>将充当叠加层，只需给它一个漂亮的背景颜色，如果你愿意，还可以不透明度。

第二个<div>是魔法。您将把它的背景设置<div>为您的图像。

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

假设图像是 500x500px，选择在 (100,100)。设置`背景位置：100px 100px;' 应该使它匹配，尽管可能需要进行一些调整以考虑您可能使用的任何边框。

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

解决方案二：

您可以使用 4 个<div>元素，全部覆盖，这样<div>图像顶部有一个，底部有另一个，选区的每一侧都有一个。然后这些<div>'s 将使用 JavaScript 动态调整大小以考虑选择的大小。这将具有覆盖您选择之外的所有区域的效果。

于 2012-05-05T05:13:03.980 回答