Question

这是html

<div id="tab-1">

</div>

她是css

#tab-1:before{
    background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;
    content: "";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;

}

demo

如何显示背景图片？如果我使用背景颜色然后它工作，但为什么不背景图像？即使有时在jsfiddle中工作，但在我的localhost中也不行。

Answer 1

您必须从no-repeat中取出background-image，因为您在background-image属性中使用了无效的语法，这是无效的，为了使用简短的语法，您需要请改用background属性

#tab-1:before{
    background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw");
    background-repeat: no-repeat;
    content: " ";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;
}

Demo（如果您想保留background-repeat，请将background-image分开）

Demo 2（使用background属性的CSS短手语法）

Answer 2

退房：http://jsfiddle.net/6nDKP/4/

而不是：

 background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;

使用：

 background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;

Answer 3

分隔no-repeat

#tab-1:before{
    background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;
}

小提琴：http://jsfiddle.net/6nDKP/1/

Answer 4

它不起作用的原因是你的背景图像风格包括不重复。将其排除在background-repeat: no-repeat;之后。然后它会正常工作。这是代码： -

#tab-1:before{
    background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;

}

Answer 5

使用背景更改背景图像。

#tab-1:before{
    background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;
    content: "";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;

}

演示：http://jsfiddle.net/zyuWW/

如何将background-image设置为伪元素？

5 个答案: