如何使背景使用精靈圖像

我有一個大的div覆蓋所有的屏幕，我在該div上使用背景圖像，但現在，我想使該圖像成爲精靈圖像的一部分，所以我擁有更少HTTP請求。問題是，我不知道如何讓DIV使用只是一塊精靈，而不是顯示整幅圖像，例如：如何使背景使用精靈圖像

div{ 
    width: 100%; 
    height: 100%; 
    background: rgba(52, 52, 52, .5); 
    position: fixed; 
    background-image: url('http://i.imgur.com/S7v0Xyn.png'); 
}

Jsfiddle Example

我只需要使用小網格幾乎不能在精靈圖像上看到，而不是整個圖像，而且我還希望網格在整個div上重複。

來源

2013-10-24 Andres Orozco

您必須設置您要使用的圖像的寬度，高度和位置。 [Example1]（http://jsfiddle.net/NMtX7/2/），[Example2]（http://jsfiddle.net/NMtX7/3/） – Vucko

@Vucko是的，我知道，但我該怎麼做這個案例。 –

我在評論中更新了示例。 – Vucko

嘗試這樣的：

您的圖像設置爲一個位置，你不能用類圖標
後您設置一個seccond類.icon.facebook與正確的位置，看到它從精靈SICE你想顯示

http://jsfiddle.net/NMtX7/5/

<span class="icon facebook"></span> 
<span class="icon twitter"></span> 


.icon { 
    background-image: url('http://i.imgur.com/S7v0Xyn.png'); 
    background-position:3000px 3000px; 
} 
.icon.facebook { 
    border:2px solid green; /* you don't need this*/ 
    margin:20px;   /* you don't need this*/ 
    background-position:0px 0px; 
    width:30px; 
    height:30px; 
    display:inline-block; 

} 
.icon.twitter { 
    border:2px solid orange; 
    background-position:-32px 0px; 
    width:30px; 
    height:30px; 
    display:inline-block; 
}

來源

2013-10-24 06:31:24 caramba

@Andres ooh，你的意思是你想重複屏幕上的網格嗎？如果是這樣你就不能使用精靈。精靈不會重複使用imgs。所有重複的imgs都必須設置爲單個img！ – caramba

Caramba打敗了我，所以我包含一個JSFiddle純粹爲了展示它的另一個用途。

SAMPLE

HTML：

<ul id="nav"> 
    <li><a class="facebook" href="#"></a>Facebook</li> 
    <li><a class="twitter" href="#"></a>Twitter</li> 
    <li><a class="browsers" href="#"></a>Browsers</li> 
</ul>

CSS：

#nav { 
    width: 200px; 
} 
#nav li { 
    list-style-type: none; 
    font-size: 14px; 
    font-family: "Courier", sans-serif; 
    padding: 10px; 
} 
#nav li a { 
    background-image: url('http://i.imgur.com/S7v0Xyn.png'); 
    background-repeat: no-repeat; 
    display: block; 
} 
#nav li a.facebook { 
    background-position: 0px 0px; 
    width: 30px; 
    height: 30px; 
} 
#nav li a.twitter { 
    background-position: -33px 0px; 
    width: 30px; 
    height: 30px; 
} 
#nav li a.browsers { 
    background-position: 0px -40px; 
    width: 65px; 
    height: 17px; 
}

來源

2013-10-24 06:44:29

沒有人，這個想法是使用在瀏覽器圖標下幾乎看不到的小網格作爲覆蓋整個屏幕的背景，寬度= 100％，高度= 100％。看看我的例子。 http://jsfiddle.net/NMtX7/ –

如何使背景使用精靈圖像

回答

相關問題