如何应用叠加此图像？

Question

我有这个例子：

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>

CODE 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代码是不同的，我不想修改它。

它可以在不更改HTML代码的情况下执行此操作吗？ 你能告诉我一个例子吗？

提前致谢！

Answer 1

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

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>