如何在此图像上叠加? [英] How do I apply an overlay this image?

问题描述

我有这个例子:

https://jsfiddle.net/qfgx86wb/

代码HTML:

<div>
    <a><img src="http://www.altradona.ro/old/media/catalog/product/cache/1/small_image/252x252/9df78eab33525d08d6e5fb8d27136e95/m/i/microsoft-wireless-optical-mouse-5000.jpg"></a>
</div>

代码CSS:

img {
    position:relative;
    z-index:0; 
    max-width:100%;
    height:auto; width:auto\9; /* ie8 */ 
}

我找到了这个例子:

http://www.corelangs.com/css/box/overlay.html

我们要实现的这个示例(链接中的第一张图片)...我无法做这些事情，因为我的html代码是不同的，并且我不想对其进行修改.

This example we want to implement (the first picture in the link) ... I could not do these things for my html code is different and I do not want to modify it.

它可以执行此操作而无需更改HTML代码吗?你能给我举个例子吗?

It can do this without changing the HTML code? Can you please show me an example?

提前谢谢！

推荐答案

您可以使用 rgba 作为背景...

You could use rgba for the background...

img {
    position:relative;
    z-index:0; 
    max-width:100%;
    height:auto; width:auto\9; /* ie8 */ 
}

a {
    position: relative;
    display: inline-block;
}

a:hover:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(fallback-transparent.png); /* if rgba not supported */
    background: rgba(255, 0, 0, 0.3);
}

<div>
    <a><img src="http://www.altradona.ro/old/media/catalog/product/cache/1/small_image/252x252/9df78eab33525d08d6e5fb8d27136e95/m/i/microsoft-wireless-optical-mouse-5000.jpg"></a>
</div>

或不透明...

img {
    position:relative;
    z-index:0; 
    max-width:100%;
    height:auto; width:auto\9; /* ie8 */ 
}

a {
    position: relative;
    display: inline-block;
}

a:hover:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(fallback-transparent.png); /* if opacity not supported */
    background: red;
    opacity: 0.3;
}

<div>
    <a><img src="http://www.altradona.ro/old/media/catalog/product/cache/1/small_image/252x252/9df78eab33525d08d6e5fb8d27136e95/m/i/microsoft-wireless-optical-mouse-5000.jpg"></a>
</div>

这篇关于如何在此图像上叠加?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！