Question

我想实现以下目标：

在<div>元素内显示图像。
使用image-server-php（image.php）提供图像以“屏蔽”图像位置。
图像应可点击，点击后会打开另一个链接。
图片隐藏在 sorry.gif 后面，以确保用户无法“右键单击并保存图片”。

以下是我的代码：

<!-- IMAGE FRAME -->
<div class="img-frame">
    <!-- CLICKABLE TO TAKE TO ANOTHER PAGE --> 
    <a href="javascript: void(0)" OnClick="window.open('page1.php'); return false;" class="img-preview" title="Click here for more info" >
        <!-- COVER IMAGE TO STOP PPL DOWNLOADING IMAGES -->
        <div class="CoverImage">
            <!-- IMAGE SERVED VIA A IMAGE-SERVER-PHP -->
            <img src="image.php?f=three.jpg" class="scale-with-grid" width="300px" height="275px" />
            <div class="cover"><img src="assets/mm/sorry.gif" class="scale-with-grid"/></div>
        </div>
        <!-- END COVER IMAGE -->    
    </a>
    <!-- END CLICKABLE -->
</div>
<!-- END IMAGE FRAME --->

有没有办法可以将两个图像合并为一个，在同一个<img>元素中？

我在<img>元素中需要它，因为我使用prettyPhoto来创建图库。

Answer 1

将图像隐藏在另一个图像背后是一种仅适用于非技术用户的技术。请注意这一点。

技术娴熟的用户只需浏览您网页的源代码即可。

这可以通过使用CSS来实现。你想要的是两张图片，你要提供的图片覆盖着sorry.png，透明度设置为100％。然后，sorry.png应链接到page1.php

.container {
    position: relative;
}
.image {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.imageOne {
    z-index: 0;
}
.imageTwo {
    z-index: 1;
}

<div class="container">
<div class="imageOne image">
    <img src="http://placehold.it/100x100/000"></img>
</div>
<div class="imageTwo image"> <a href="page1.php">
    <img src="http://placehold.it/100x100/fff">

    </img>
    </a>
</div>

JsFiddle

Source

Answer 2

由于我之前的答案并非完全符合您的要求，但仍然与我相关，这里是另一个答案。

要使用一个IMG标记实现您想要的效果，您应该使用background-image CSS属性。

这意味着你有一个透明的sorry.gif的IMG标签，它具有如下的CSS属性：

.imageSorry
{
    background-image:url('three.gif');
    opacity:1;
}

将2个div和1个img组合成1个img？

2 个答案: