将 2 个 div 和 1 个 img 合并为 1 个 img？ [关闭]答案

【问题标题】：Combine 2 divs and 1 img into 1 img? [closed]将 2 个 div 和 1 个 img 合并为 1 个 img？ [关闭]
【发布时间】：2014-08-09 23:51:58
【问题描述】：

我想实现以下目标：

在<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 来创建画廊。

【问题讨论】：

所以...图片中的HTML？ :)
@SergiuParaschiv 不是真的。我想知道是否有办法做这样的事情<img src=image.phpf=three.jpg class="blah" coverimage="sorry.gif" href="java.." onclick=="window.open"... </img>
没有内置的coverimage 这样的东西。此外，除了a 之外，其他任何内容都没有href。
@Sergiu coverImage- 我已经定义了所有内容并正常工作

标签： php html

【解决方案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

【讨论】：

感谢@Marcin，但使用 image-server-php 我掩盖了图像位置，是否仍然可以下载图像？
你能给我一个“image-server-php”的链接吗？
在我的情况下，用户不能使用www.mywebsite.com/image.php?f=three.jpg 直接从浏览器访问图像。我使用.htaccess 和image.php?onlyHappensFromHTACCESS=denied 来确保只能通过主 php 访问图像
如果图像被传输给用户并显示给他，那么无论您如何保护它，用户都将拥有该图像。如果你设置这样一个页面，我可以演示如何做到这一点。（来源：对网络抓取感兴趣）
是的，你是对的，如果有人打算从网站上抓取内容，他们会找到方法 :-)。我的方法有望阻止“投机取巧”。

【解决方案2】：

由于我之前的答案不是您想要的，但仍然与我相关，这里是另一个。

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

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

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

【讨论】：