如何将背景图像设置为伪元素？

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;

}

演示

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

Answer 1

您必须从background-image删除no-repeat ，因为您正在使用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-image ，请分离background-repeat ）

演示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/