0

这是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;

}

演示

如何显示背景图像？如果我使用背景颜色，那么它可以工作，但为什么不使用背景图像？即使有时可以在 jsfiddle 中工作，但不能在我的本地主机中工作。

4

5 回答 5

2

您必须从中取出，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;
}

演示（background-repeat如果要保留，请分开background-image）

Demo 2background （使用属性的 CSS 简写语法

于 2013-07-30T05:48:59.927 回答
1

退房：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;
于 2013-07-30T06:00:29.687 回答
0

分开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/

于 2013-07-30T05:48:23.893 回答
0

它不起作用的原因是您在背景图像样式中包含不重复。将其排除在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;

}
于 2013-07-30T05:51:01.570 回答
0

使用背景更改背景图像。

#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/

于 2013-07-30T05:51:16.730 回答