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

How to add overlay on my image

本文关键字：添加 叠加 图像 我的      更新时间：2023-09-26

如何为我的代码添加覆盖。

<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

问题：

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

解决方案一：

您需要做的实际上是拥有两个版本的图像。一个作为基础，由覆盖层覆盖。第二个作为选区(在叠加层的顶部(，边缘被切断。正确放置所有图像，用户将永远不会知道他们看到的是两个图像。

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

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

第二个<div>是魔术。您将此<div>的背景设置为图像。

现在使用 JS，您可以调整"背景位置：Xpx Ypx;"属性，以便显示的图像部分与所选位置匹配。

假设图像为 500x500 像素，所选内容为 (100,100(。设置"背景位置：100px 100px;"应该使其匹配，但可能需要进行一些调整以考虑您可能使用的任何边框。

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

解决方案二：

您可以使用 4 个<div>元素，所有叠加层，这样图像顶部有一条<div>，底部各有一条，选区两侧各有一条。然后，这些<div>将使用JavaScript动态地重新调整大小，以考虑选择的大小。这将具有覆盖所选区域之外的所有区域的效果。

试试这个尺寸： http://www.webresourcesdepot.com/jquery-image-crop-plugin-jcrop/如果没有别的，它会激发想法。

相关文章：