Html 导航图标未显示在移动版本上？

因此，我修改了css元素以添加，但到目前为止，在移动设备上显示导航图标的操作还没有成功。请帮助我在的响应式设计视图中调试代码，并告诉我是什么工作的。谢谢你的时间。下面是常规css

#menu-icon {
    display: none;
    background-image: url(http://www.w3newbie.com/wp-content/uploads/icon.png) center;
    width: 40px;
    height: 40px;
    background-image: no-repeat;
}

#menu-icon{
    display: block;
}

下面是移动css

#menu-icon {
    display: none;
    background-image: url(http://www.w3newbie.com/wp-content/uploads/icon.png) center;
    width: 40px;
    height: 40px;
    background-image: no-repeat;
}

#menu-icon{
    display: block;
}

---

背景图像

没有位置

中心

等多个属性。它应该是

背景

。同样，重复语法应该是

后台重复

。更新你的CSS如下

  #menu-icon {
    display: none;
    background: url(http://www.w3newbie.com/wp-content/uploads/icon.png) center;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
  }

  #menu-icon {
    display: none;
    background-image: url(http://www.w3newbie.com/wp-content/uploads/icon.png);
    background-position:center;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
  }

或者你可以像下面那样使用它

  #menu-icon {
    display: none;
    background: url(http://www.w3newbie.com/wp-content/uploads/icon.png) center;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
  }

  #menu-icon {
    display: none;
    background-image: url(http://www.w3newbie.com/wp-content/uploads/icon.png);
    background-position:center;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
  }

你的手机CSS没有问题