Html 图像覆盖使用：在伪元素之后

我试图通过after属性将一个透明图像覆盖到另一个图像上。它甚至没有用这种方法出现。如果可能的话，我想使用base64编码的图像。我也尝试了一个常规的非编码图像。没有骰子。有人有什么想法吗

我的HTML：

<div class="image-container">
        <img src="images/sample.jpg" alt="Sample Image" />
</div>

---

no repeat

对于您的

content

属性是无效的值，因此应该是

.image-container img:after {
    position: absolute;
    margin-top: -50%;
    width: 183px;
    height: 103px;
    content: url(#);
}

使用

display:block也没有意义在
绝对
定位元素上



另外，最好使用
。图像容器：after

确保你的JSFIDLE工作？适合我。请确保您使用的浏览器能够理解数据URIs@user.Chrome 36，我认为这是对该数据的支持URL@user1153551编辑我的answer@DaveRottino在容器元素上使用
：after
伪代码，而不是
：after
在替换的元素（如图像）上不受支持，所以我建议把它放在容器上。
.image-container img:after {
    position: absolute;
    margin-top: -50%;
    width: 183px;
    height: 103px;
    content: url(#);
}