使背景圖像是一個div

Question

我試圖做一個背景圖像是一個div之外，無法弄清楚如何做到這一點（如果連有可能）之外。我的HTML：

<div id="test"></div> 

我的CSS：

#test { 
    width: 50px; 
    height:50px; 
    background: 0 50px url('https://developers.google.com/_static/images/developers-logo.svg') blue; 
} 

一個獨立的演示：

http://jsfiddle.net/568Zy/

該演示展示了50×50格內的圖像。我所希望的是讓背景圖像從頂部0px開始，從左側開始50px。

任何想法？

Answer 1

你的問題沒有說清楚你想要什麼，最終結果的樣子。

這是不可能使一個背景圖片「溢出」這是元素，但是你可以將背景圖像應用到僞元素，讓你想，無論你想，無論大小，它的位置。

我用你的例子這種技術：http://jsfiddle.net/568Zy/11/

#test { 
    background: blue; 
    height:50px; 
    position: relative; 
    width: 50px; 
} 
#test:before { 
    background: url("https://developers.google.com/_static/images/developers-logo.svg") repeat scroll 0 0 transparent; 
    content: " "; 
    display: block; 
    height: 100px; 
    position: absolute; 
    width: 450px; 
    z-index: -1; 
} 

如果這不是你想要的效果，請重新表述您的問題，並考慮做一個模擬的圖像顯示你想要什麼樣子。

Answer 2

試試這個：http://jsfiddle.net/568Zy/16/。從本質上講，你創建兩個<div>元素，並設置一個是絕對有z-index: 0;上一個和z-index: 1;另一方。

<div id="test">zzz</div> 
<div class="z-index"></div> 

#test { 
    background: blue; 
    width: 50px; 
    height:50px; 
    position: relative; 
    z-index: 1; 
} 

.z-index { 
    position: absolute; 
    background: url('https://developers.google.com/_static/images/developers-logo.svg'); 
    z-index: 0; 
    width: 300px; 
    height: 100px; 
    top: 0px; 
    left: 50px; 
}