0

ページ上の画像の一部をマスクして、画像の一部を暗くして、強調表示された部分を目立たせたいと思います。（これは、フォトエディタでトリミングツールの効果をプレビューするためによく使用されます。）

現在、私の計画では、画像の2つのコピーを重ねてロードしclip: rect();、上の画像の一部をスライスするために使用しています。これを処理するためのより良い方法はありますか？また、私の画像は実際にはアニメーションGIFです（ああ、親愛なる...）

javascriptでクロップを更新しようとする前に、これを理解するのが最善だと思いました。

CSS：

    .container {
        width: 1075px;
        margin: 10px;   
        border: 1px solid black;
        padding: 10px;
        overflow: auto;
    }

    .image-container {
        position: relative;
        clear: both;
        background-color:#eee;
    }

    .background{
        opacity:.40;
    }

    .highlight {
        position: absolute;
        top: 0px;
        left: 0px;
        clip: rect(126px 257px 197px 156px);
    }

HTML：

<div class="container">
<div class="image-container">
<img class="background" src="animate.gif" width="1075" height="605" />
<img class="highlight" src="animate.gif" width="1075" height="605" />
</div>
</div>
4

2 に答える 2

1

各画像の位置：絶対値を使用して画像を配置します。上のレイヤーは下のレイヤーよりも小さくする必要があります。background-positionを使用するより：xy;

このようなもの：

#image1, #image2 {
    position: absolute;
    left: 0;
    top: 0;
    background: url('https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif')
}

#image1 {
    min-width: 276px !important;
    min-height 110px !important;
    opacity: 0.5;
}

#image2 {
    left: 251px;
    width: 25px;
    height: 110px;
    background-position: 100% 100%;
}​

ここに例を見てください：http： //jsfiddle.net/8n3Rr/

于 2012-08-06T19:40:04.390 に答える
0

画像の上に配置<div>し、不透明度を低くして、幅または高さを画像の半分のサイズにします。

于 2012-08-06T19:27:02.267 に答える