为什么在CSS中使用“重复”后导航栏加倍？

Question

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

这是我的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%，要么更好：使用背景渐变。

Answer 2

说您的代码背景图像重复，因此图像显示为双倍导航栏。在css background-size中添加此代码：100％100％;在#cssmenu