如何設置svg作爲背景圖片

我是網絡開發新手。我試圖做的是建立一個自適應的網站。我決定爲我的許多圖像使用.svg。我的問題是 - 是否有任何方式使用CSS樣式表使用.svg作爲背景圖像，並保持適應性和規模。我希望能夠使用媒體查詢來保持網站的移動部分更小，圖像更少。 olny問題是，我希望我的.svg能夠擴展（隨着網頁的增長而變得越來越小）。我已經找到了一種方法將其作爲內嵌圖像執行此操作，但始終需要我從加載開始加載所有圖像。我不希望移動用戶不得不下載所有的圖像，因爲它會減慢速度並降低數據帳戶的收入。我希望媒體查詢根據用戶的屏幕大小通過css將圖像拖入和拖出頁面。很抱歉，這個冗長的問題。謝謝你的時間。如何設置svg作爲背景圖片

PS試圖用java腳本做到這一點，如果可能的話？有沒有在網站上使用java腳本？

來源

2014-03-05 user3384747

CSS規則

background-image: url('file.svg');

爲了使您的SVG的規模，你應該使用百分比爲您的測量在可能的情況。舉例來說，如果你想填滿整個背景漸變：

file.svg

<?xml version="1.0" encoding="utf-8"?> 
<svg width="100%" height="100%"> 
    <defs> 
     <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> 
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" /> 
      <stop offset="100%" style="stop-color:rgb(192,192,192);stop-opacity:1" /> 
     </linearGradient> 
    </defs> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" /> 
</svg>

您可能還需要尋找到responsive CSS with media queries如果不能提供足夠的控制。您可以使用它將其更改爲不同的SVG。這個CSS部分針對頂多是800像素的寬屏：

@media screen and (max-width: 800px) { 
    body { 
     background-image: url('file800.svg'); 
    } 
}

另一個工具在您的處置是background-size規則。這是一個CSS 3規則，因此您可能需要查看不同瀏覽器的支持級別。

來源

2014-03-05 18:10:51

ahh在實際的svg代碼它自己。我的一些svg很複雜，所以我不知道這是否值得，但不好檢查。感謝您的快速回復。 – user3384747

是的，我剛剛檢出了一個.svg文件，其中有很多值非常複雜。我甚至不知道百分比從哪裏開始。 – user3384747

這是一篇關於我所指的更多內容的文章。這篇文章是在2010年編寫的。有沒有辦法解決這個問題呢。就像我說的，我對web開發很陌生。我真的很喜歡響應式設計，雖然它很棒，我希望它能成爲移動和桌面用戶的最佳網站。 – user3384747

如何設置svg作爲背景圖片

回答

相關問題