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

問題：

残念ながら、CSS の背景は本質的に加法的です。何かを覆って色を追加することはできますが、色を無効にすることはできません。

解決策 1:

実際に行う必要があるのは、2 つのバージョンのイメージを用意することです。オーバーレイで覆われたベースとしての 1 つ。2 番目の選択 (オーバーレイの上) で、エッジが切り取られています。すべてを正しく配置すれば、ユーザーは 2 つの画像を見ていることを認識しません。

<img>(または<div>背景付きの ) と 2 つの要素が必要になり<div>ます。1 つは画像と同じ寸法で、もう 1 つは選択範囲の寸法です。3 つすべてを使用position: absolute;し、 を含む要素に含める必要がありますposition: relative;。

最初の<div>ものはオーバーレイとして機能します。必要に応じて、素敵な背景色と不透明度を指定してください。

2つ目<div>は魔法。この背景を<div>画像に設定します。

JS を使用して、「background-position: Xpx Ypx;」を調整できます。表示される画像の部分が選択範囲の位置と一致するようなプロパティ。

画像が 500x500px で、選択範囲が (100,100) であるとします。「背景位置: 100px 100px;」の設定 一致させる必要がありますが、使用している境界線を考慮するためにいくつかの調整が必要になる場合があります。

明らかに、JavaScript は画像サイズの変更も考慮に入れる必要があります。

解決策 2:

画像の上部に 1 つ、下部に 1 つ、選択範囲の両側に 1 つというように、 4 つ<div>の要素 (すべてオーバーレイ)を使用できます。<div>これら<div>の は、選択範囲のサイズを考慮して、JavaScript で動的にサイズ変更されます。これは、選択範囲外のすべての領域をカバーする効果があります。

于 2012-05-05T05:13:03.980 に答える
0

サイズを試してみてください: http://www.webresourcesdepot.com/jquery-image-crop-plugin-jcrop/ 他に何もなければ、アイデアを刺激するでしょう。

于 2012-05-05T04:32:21.107 に答える