Question

我试图根据网站配色方案在不同颜色的网站上显示图片... 我需要在html和浏览器＆gt;右键单击中链接替代图像而不是此图像，以便尽管显示此备用彩色图像，但用户只能访问标准备用图像。

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

虽然我无法改变样式表，但我需要在html页面添加一些css＆＃34;样式＆＃34;标签，以便能够显示此新图像，并将用户链接到标准图像。

我的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"。根据Chrome的Inspect Element，CSS是：

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，我只能将解决方案添加到我的单独样式表中，而不是添加到主样式表。

我的问题，如上所述，我需要显示图像，同时仅限制用户使用备用图像。因此，如果图像被下载/链接，右键单击或任何可能在其他地方复制图像的内容，则必须是备用图像而不是显示的图像。

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

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

a.picture-link { position: absolute }

图像从视图中消失，并且图像都不可见。

另外，尝试了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

使用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/

链接图像但显示另一个图像？

1 个答案: