Question

我想屏蔽页面上的部分图像，使图像的一部分更暗，因此突出显示的部分突出。（这通常用于预览照片编辑器中裁剪工具的效果。）

目前，我的计划是将两个图像副本相互叠加，然后使用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>

Answer 1

使用position：absolute为每个图像定位图像。上面的层应该小于底层。比使用background-position：x y;

这样的事情：

#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/

Answer 2

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

如何突出显示网页上的部分图像？

2 个答案: