css - 为什么在 CSS 中使用 "repeat"后导航栏翻倍？

Question

我想在我的网站上创建一个导航栏，背景使用重复的橙色图像 block 。这是 image .然而，最终结果显示了一个双倍的导航栏，如图所示 here .即使在更改 css 中的“重复”属性后，它仍然保持一倍。我如何让它只有一层而不是加倍？

这是我的 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

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