Question

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

对此有什么适当的选择？（我有类似问题here使用HTML5画布）

Answer 1

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

至于十字架，我会用一张图片。这样你就可以将高度和宽度设置为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/

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

1 个答案: