图像叠加使用:在伪元素之后

时间:2014-03-15 05:57:12

标签: html css pseudo-element css-content

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

我的HTML:

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

我的CSS:

.image-container {
    position: relative;
    width: 183px;
    height: 137px;
    overflow: hidden;
}

.image-container img {
    position: absolute;
}

.image-container img:after {
    display: block;
    position: absolute;
    margin-top: -50%;
    width: 183px;
    height: 103px;
    content: url(data:image/png;base64,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) no-repeat;
}

1 个答案:

答案 0 :(得分:5)

no-repeatcontent属性的无效值,因此应为

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

使用display: block;定位元素上的absolute也无济于事。

Demo


另外,chrome doesn't understand img:after最好使用.image-container:after

Demo 2