0

I have an image inside my page. After some javascript trigger event I want a cross appear on the image. Image will still be visible but cross will be on top.

What is the proper alternatives for this? (I have similar question here that used HTML5 canvas)

4

1 回答 1

3

我将为图像和十字架创建一个包装器，并将它们绝对定位在包装器中。包装器本身在 DOM 中是流动的，但图像和十字架将被绝对定位，以便十字架出现在图像的顶部。这可以通过将包装器的位置属性设置为相对并对其子级使用绝对定位来完成。

至于十字架，我会使用图像。这样，您可以将高度和宽度设置为 100%，以便它会随着包装器一起拉伸。要控制大小，您可以在包装元素上设置宽度/高度，而不是图像本身。

HTML

<div class="wrapper">
    <img class="img" src="actual-image.jpg" />
    <img class="cross-img" src="cross-image.jpg" />
</div>

CSS

.wrapper {
    position:relative;
    width: 150px;
    height: 150px;
}

.img, .cross-img {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;
}

.cross-img {
    opacity: 0.5;
}

然后显示或隐藏十字架是微不足道的。这是一个jQuery片段：

$('.cross-img').hide();

这是一个 jsfiddle 演示：http: //jsfiddle.net/J69qR/

于 2013-05-22T18:28:32.883 回答