SVG作爲網站導航的CSS背景條

我畫了一個小的（水平/寬度）svg作爲我網站導航的背景。我的網站導航發生100％的瀏覽器視口，我希望svg圖像可以填充100％的空間。SVG作爲網站導航的CSS背景條

因此，使用CSS我將導航（.nav）的背景設置爲nav.svg，但後來我看到（當我在瀏覽器中打開html文件）svg不是導航的全角，但是我用小寬度畫了一下。

我怎樣才能讓SVG伸展並填充整個導航寬度（100％的頁面）？

下面是HTML文件，其中的導航代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Distributed Horizontal Menu</title> 
<meta name="generator" content="PSPad editor, www.pspad.com"> 
<style type="text/css"> 
*{ 
    margin:0; 
    padding:0; 
} 
.nav { 
    margin:0; 
    padding:0; 
    min-width:42em; 
    width:100%; 
    height:47px; 
    overflow:hidden; 
    background:transparent url(nav.svg) no-repeat; 
    text-align:justify; 
    font:bold 88%/1.1 verdana; 
} 
.nav li { 
    display:inline; 
    list-style:none; 
} 
.nav li.last { 
    margin-right:100%; 
} 
.nav li a { 
    display:inline-block; 
    padding:13px 4px 0; 
    height:31px; 
    color:#fff; 
    vertical-align:middle; 
    text-decoration:none; 
} 
.nav li a:hover { 
    color:#ff6; 
    background:#36c; 
} 
@media screen and (max-width:322px){ 
    /* styling causing first break will go here*/ 
    /* but in the meantime, a test */ 
    body{ 
     background:#ff0000; 
    } 
} 
</style></head><body> 

<ul class="nav"> 
<!--[test to comment out random items] 
    <li>&nbsp; <a href="#">netscape&nbsp;9</a></li> 
[the spacing should be distributed]--> 
    <li>&nbsp; <a href="#">internet&nbsp;explorer&nbsp;6-8</a></li> 
    <li>&nbsp; <a href="#">opera&nbsp;10</a></li> 
    <li>&nbsp; <a href="#">firefox&nbsp;3</a></li> 
    <li>&nbsp; <a href="#">safari&nbsp;4</a></li> 
    <li class="last">&nbsp; <a href="#">chrome&nbsp;2</a> &nbsp; &nbsp;</li> 
</ul> 

</body></html>

和下面是SVG代碼：

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="321.026px" height="44.398px" viewBox="39.487 196.864 321.026 44.398" 
    enable-background="new 39.487 196.864 321.026 44.398" xml:space="preserve"> 
<path fill="url(#SVGID_1_)" d="M360,238.721c0,1.121-0.812,2.029-1.812,2.029H41.813c-1.001,0-1.813-0.908-1.813-2.029v-39.316 
    c0-1.119,0.812-2.027,1.813-2.027h316.375c1.002,0,1.812,0.908,1.812,2.027V238.721z"/> 
<path opacity="0.1" fill="#FFFFFF" enable-background="new " d="M358.188,197.376H41.813c-1.001,0-1.813,0.908-1.813,2.028 
    v39.316c0,1.12,0.812,2.028,1.813,2.028h316.375c1,0,1.812-0.908,1.812-2.028v-39.316C360,198.284,359.189,197.376,358.188,197.376z 
    M358.75,238.721c0,0.415-0.264,0.779-0.562,0.779H41.813c-0.3,0-0.563-0.363-0.563-0.779v-39.316c0-0.414,0.263-0.777,0.563-0.777 
    h316.375c0.301,0,0.562,0.363,0.562,0.777V238.721z"/> 
<path opacity="0.5" fill="#FFFFFF" enable-background="new " d="M358.188,197.376H41.813c-1.001,0-1.813,0.908-1.813,2.028v1.461 
    c0-1.12,0.812-2.028,1.813-2.028h316.375c1.002,0,1.812,0.908,1.812,2.028v-1.461C360,198.284,359.189,197.376,358.188,197.376z"/> 
<g id="seperators"> 

     <line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="104.5" y1="197.375" x2="104.5" y2="240.75"/> 

     <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="103.5" y1="197.375" x2="103.5" y2="240.75"/> 

     <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="105.5" y1="197.375" x2="105.5" y2="240.75"/> 

     <line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="167.5" y1="197.375" x2="167.5" y2="240.75"/> 

     <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="166.5" y1="197.375" x2="166.5" y2="240.75"/> 

     <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="168.5" y1="197.375" x2="168.5" y2="240.75"/> 

     <line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="231.5" y1="197.375" x2="231.5" y2="240.75"/> 

     <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="232.5" y1="197.375" x2="232.5" y2="240.75"/> 

     <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="230.5" y1="197.375" x2="230.5" y2="240.75"/> 

     <line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="295.5" y1="197.375" x2="295.5" y2="240.75"/> 

     <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="294.5" y1="197.375" x2="294.5" y2="240.75"/> 

     <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="296.5" y1="197.375" x2="296.5" y2="240.75"/> 
</g> 
<path fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" d="M360,238.721c0,1.121-0.812,2.029-1.812,2.029 
    H41.813c-1.001,0-1.813-0.908-1.813-2.029v-39.316c0-1.119,0.812-2.027,1.813-2.027h316.375c1.002,0,1.812,0.908,1.812,2.027 
    V238.721z"/> 
</svg>

我感謝並歡迎任何和所有的意見，幫助和建議。

在此先感謝！

來源

2012-06-06 Irfan Mir

嘗試添加背景大小元素。（背景大小：100％100％;）

.nav { 
     margin:0; 
     padding:0; 
     min-width:42em; 
     width:100%; 
     height:47px; 
     overflow:hidden; 
     background:transparent url(nav.svg) no-repeat; 
     background-size: 100% 100%; 
     text-align:justify; 
     font:bold 88%/1.1 verdana; 
    }

來源

2012-06-06 06:25:13 MNilson

這只是居中背景圖像，它如何跨越它的背景或（.nav）的元素的整個寬度？ –

使用 '-webkit-background-size：100％100％;'讓它在Chrome中正確調整大小，不會模糊不清。在這一刻，我還沒有解釋爲什麼它在FF中調整大小模糊。 – MNilson

我在http://stackoverflow.com/questions/8954028/firefox-svg-graphics-blurry閱讀，你可以通過在xml中將寬度更改爲100％來修復模糊圖像，並保留其他元素。試試吧，它也可以爲你工作。 – MNilson

SVG作爲網站導航的CSS背景條

回答

相關問題