如何將背景圖像設置為偽元素？

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/