Link 一张图片却显示另一张？

Question

我正在尝试在网站上显示一张图片，该图片根据网站的配色方案具有不同的颜色... 我需要在 html 和浏览器 > 右键单击中 link 替代图像而不是该图像，这样虽然显示了这个替代颜色的图像，但用户只能访问标准替代图像。

例如网站的配色方案是：深灰色。所以图像图像必须是：白色。但图像的标准颜色是：深蓝色。所以我不得不将图像颜色更改为：浅蓝色。因此，我没有显示标准彩色图像，而是显示了根据新的深色配色方案更改过的图像。

虽然我不能改变样式表，但我需要添加一些 css 到 html 页面的 "style" 标签才能显示这个新图像，并且 link 用户给标准图像。

我对 div 的 html 是：

<div class="picture">
    <div class="picture-div">
        <a class="picture-link" href="image_info.html">
            <img class="picture-img" src="img.png">
            <span class="picture-title">
                <span class="picture-title-div">Title for the Image</span>
            </span>
        </a>
    </div>
</div>

图像放在a.picture-link下，class="picture-img"。 CSS 根据 Chrome 的检查元素是：

elements * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: 0 0;
}

.picture {
clear: both;
float: left;
height: 100%;
position: relative;
z-index: 1;
}

.picture-div {
font-size: 0;
}

.picture-link {
display: block;
height: 100%;
overflow: visible;
color: #666;
}

.picture-img {
display: block;
max-width: 100%;
}

img {
border: 0;
-ms-interpolation-mode: bicubic;
max-width: 100%;
height: auto;
}

.picture-title {
line-height: inherit;
}

.picture-title {
display: none;
font-size: 30px;
line-height: 30px;
white-space: normal;
}

我无法更改主样式表，因为我已将其缩小。虽然，我在单独的样式表中添加了所需的更改，因此，如果解决方案是通过 CSS，我只能将解决方案添加到我的单独样式表中，而不是主样式表中。

如上所述，我的问题是我需要显示图像，同时限制用户只能使用备用图像。因此，如果图像是 downloaded/linked、右键单击或任何可能在其他地方复制图像的图像，则它必须是备用图像，而不是显示的图像。

我正在考虑为两个图像添加一个 z-index，同时保持图像的正 z-index 到 opacity:0;。这样，如果访问图像，将只访问不可见的标准图像，从而防止 link 到备用图像。

我尝试了以下选项，但这些方法没有帮助。

a.picture-link { position: absolute }

图像从视图中消失，none 图像可见。

另外，试过 this method：

.newclass {
    background:url(2.jpg) no-repeat;
    display:inline-block
}
.newclass img {
    position:relative;
    z-index:-1
}

我正在尝试根据 jQuery、CSS、javascript。虽然，我的偏好是 CSS，因为大多数浏览器都支持 css。

有人可以提供帮助吗？谢谢！

Answer 1

工作 fiddle 使用 CSS 位置和不透明度：

.image{position:relative}
.png-over{position:absolute; top:0; left:0;

opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
}

http://jsfiddle.net/jNpaH/67/

Link 一张图片却显示另一张？

Link an image but display another?

html

javascript

css

jquery

image