CSS3：＆＃34;＆＃34;＆＃34;定位图像不显示

Question

我的目标（注意＆＃34之前的小灰色圆圈;清洁之前的＃34;以及＃34;清洁之后＃34;）

通过这段代码，我只能查看RED SQUARE而不是图像（但在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

从图片网址中丢失第一个/：

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。

Answer 2

@Catalin是对的，如果删除/，这可能会更好。

对于您的信息，您知道只有 css 才能达到相同的效果吗？您可以使用以下代码在p.before-after::after课程中使用css创建一个圆圈：

p.before-after::after {
    border-radius: 50%;
    background-color: grey;
    width: 11px;
    height: 11px;
}

Answer 3

我认为您的背景属性的简写符号存在问题。试试这个：

background: red url('../images/template/small-circle.png') 0 0 no-repeat;
background-attachment: fixed;