javascript - 在 HTML 文件内的图像上创建十字

Question

我的页面中有一张图片。在一些 javascript 触发事件之后，我希望图像上出现一个十字。图像仍然可见，但十字将位于顶部。

正确的替代方案是什么？ (我有类似的问题 here 使用 HTML5 canvas)

Answer 1

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

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

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/