0

我想掩盖页面上图像的一部分，使图像的一部分变暗，以便突出显示的部分。（这通常用于在照片编辑器中预览裁剪工具的效果。）

目前，我的计划包括加载两个图像的副本，并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

使用 position: absolute 为每个图像定位图像。上面的层应该小于下面的层。比使用 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

尝试将 a<div>放置在图像上，在其上放置低不透明度，宽度或高度为图像大小的一半。

于 2012-08-06T19:27:02.267 回答