html - CSS3 : "after" positioned image doesn't show

Question

我的目标(注意“清洁前”和“清洁后”下方的灰色小圆圈):

使用这段代码，我只能查看一个红方 block ，而不是图像(但在 Firebug 中我可以看到图像已正确加载:

HTML:

<p class="before-after">Before Cleansing</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

CSS:

p.before-after:after{content:"";width:11px;height:11px;background:red url('/../images/template/small-circle.png') no-repeat top left fixed;display:block;margin:0 auto;}

我的结果:

当然，如果我将背景颜色更改为透明，我什么也看不到。

谢谢。

Answer 1

丢掉图片url中的第一个/:

p.before-after:after {
    content:"";
    width:11px;
    height:11px;
    background: red url('../images/template/small-circle.png') no-repeat top left fixed;
    display:block;
    margin:0 auto;
}

编辑:

同时从背景属性中删除 fixed。