个人中心
gpt4 book ai didi

css - SVG 作为网站导航栏的 CSS 背景

转载 作者：行者123 更新时间：2023-11-28 13:55:05 26 4
gpt4 key购买 nike

我画了一个小的(水平/宽度)svg 作为我网站导航的背景。我网站的导航占浏览器视口(viewport)的 100%，我希望 svg 图像填充该 100% 的空间。

因此，我使用 css 将导航 (.nav) 的背景设置为 nav.svg 但后来我看到(当我在浏览器中打开 html 文件时)svg 不是导航的全宽，但是在我画的小宽度处。

如何让 SVG 拉伸(stretch)并填充导航的整个宽度(页面的 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>

我感谢并欢迎任何和所有评论、帮助和建议。

提前致谢!

最佳答案

尝试添加背景尺寸元素。 (背景大小: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;
    }

关于css - SVG 作为网站导航栏的 CSS 背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10908228/

26 4 0
文章推荐： Javascript 模板 - 使用 #{variable} 语法
文章推荐： css - 我想要从下到上垂直对齐的文本。如何实现它。附上预期的
文章推荐： javascript - 切换 DIV，而不切换所有类似名称的 DIV
文章推荐： javascript - 什么是更好的？切换可见性或操作文本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com