如何在我的圖像上添加覆蓋

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，您可以調整“背景位置：Xpx Ypx;” 屬性，以使顯示的圖像部分與所選內容的位置匹配。

假設圖片為500x500px，選擇為（100,100）。 設置`background-position：100px 100px;' 應該使之匹配，盡管可能需要進行一些調整以考慮您可能使用的任何邊框。

顯然，您的JavaScript還需要考慮圖像大小的任何修改，因為這會導致選擇對齊失敗。

解決方案二：

您可以使用4個<div>元素（所有疊加層），以便圖像頂部有一個<div> ，底部有一個<div> ，並且所選內容的每一側都有一個。 然后，將使用JavaScript動態調整這些<div>的大小，以考慮選擇的大小。 這樣可以覆蓋您選擇之外的所有區域。