如何獲取背景圖片/圖片以通過CSS來填充容器？

我有一個縮放矢量圖像，我希望它填充一個容器。這裏有幾個這樣的問題，儘管它們有點舊。例如。 Stretch and scale CSS background 如何獲取背景圖片/圖片以通過CSS來填充容器？

但是，當我試圖實施這樣的解決方案時，結果令人失望。

例如：

body { 

    margin: 0; 
    padding: 0; 
    text-align: center; 
    color: #000; 
    background-color: #000 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 100%; 

} 

... 

.twoColLiqLtHdr #container { 
    width: 80%; 
    margin: 0 auto; 
    border: 2px solid #000000; 
    text-align: left; 
    background-color: #003; 
    background-image: url('background_image.svg'); 
    /*background-position: 80% 80%; */ 

    background-repeat: no-repeat; 
    color: #000; 
    font-family: "Times", cursive; 


    background-attachment:fixed; 
    min-height:100%; 
    /*top: 0; 
    left: 0; */ 



}

我已經嘗試了各種安排，但我不能讓它伸展，不留空白區（重複的是各種各樣的成功，但看起來可怕）。

但是，由於我正在使用svg，所以我可能以錯誤的方式處理這個問題，應該在html中使用svg xmlns標記嗎？（附註：我知道IE8的絕對無法處理svgs的）

來源

2012-09-26 user137263

你試過

background-size:cover;

檢查一些examples。

我遇到了webkit，background-size:cover和SVG背景圖片的問題。我解決了它加入

-webkit-background-origin:border;

來源

2012-09-26 12:41:33 Giona

謝謝。封面成功覆蓋了容器。然而，奇怪的是，圖像太「放大」，只能看到圖像的上半部分。 o.O由於我修復了圖像，因此無法看到圖像的其餘部分... – user137263

您不需要'background-attachment：fixed;'了，因爲它會覆蓋整個高度！ – Giona

這讓我有點莫名其妙 - 但是當背景圖片不再被修復時，背景圖片似乎完全消失了！：p – user137263

你可能需要添加preserveAspectRatio =「無」爲SVG圖像本身的外<svg>元素的屬性。

如果你不想修改圖像文件，那麼你可以嘗試

背景圖像：網址（ '＃background_image.svg svgView（preserveAspectRatio（無））'）;

Firefox 15會支持這個，也可能是其他的UA。

來源

2012-09-26 12:57:07

不錯，非常有用。如果可能的話，我如何在base64上使用內聯SVG編碼來使用它？ – Giona

在轉換爲base64之前，我在SVG中添加了該屬性，它的工作原理類似於魅力。謝謝@RobertLongson！ – shshaw

非常感謝。你和preserveAspectRatio =「無」保存了我的一天。 :) –

如何獲取背景圖片/圖片以通過CSS來填充容器？

回答

相關問題