为什么在 CSS 中使用 "repeat" 后导航栏翻了一番？

Question

我想在我的网站上创建一个导航栏，背景使用重复的橙色图像块。这是 image. However, the final result shows a doubled navbar as shown here。即使在 css 中更改 "repeat" 属性后，它仍然保持双倍。我如何让它只有一层而不是加倍？

这是我的 css 代码：

#cssmenu{
      border-style: initial;
    border-color: initial;
    border-width: 0px;
    margin: 0px;
     padding:0px;
        border-image-source:initial;
        border-image-slice:initial;
        border-image-width:initial;
        border-image-outset:initial;
        border-image-repeat:initial;

        list-style-type:none;
        list-style-position:initial;
        list-style-image: initial;


        line-height:1;
        display:block;
        position:relative;
        box-sizing: border-box;


        background-image: url('../../SiteAssets/o.png');
        background-repeat:repeat;
        background-repeat-x:repeat;
        background-repeat-y:repeat;
        z-index:2;


    }

    #cssmenu:after{

    content:".";
    z-index:2;
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;

}

和我的 html 代码：

<div id="cssmenu" style="left:0px; top:0px" >
        <ul>
           <li>
              <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>
           <li>
               <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>
           <li>
                <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>
           <li>
                <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>
           <li>
                <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>

        </ul>

        </div>

Answer 1

假设您的代码 background-image 重复，因此图像显示为双导航栏。在 css background-size: 100% 100%; 添加这段代码在#css菜单

Answer 2

这是正确的行为。您在 y 轴上重复背景图像，并且由于其中的渐变，您会看到它两次。图像对于导航栏的高度来说太小了。所以要么设置 background-size: auto 100%，要么更好：使用背景渐变。

为什么在 CSS 中使用 "repeat" 后导航栏翻了一番？

Why navbar doubled after using "repeat" in CSS?

css

repeat

navbar