Question

所以我修改了css元素以添加 background image ，但到目前为止还没有成功在移动设备上显示导航图标。请帮助我在 Link 的响应式设计视图中对代码进行调试，并告诉我哪些方法有效。谢谢你的时间。下面的常规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;
}

移动css低于

#menu-icon{
    display: block;
}

Answer 1

background-image没有位置center等多个属性。它应该是background。同样重复的语法应该是background-repeat。像下面一样更新你的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;
  }

您的移动CSS中没有任何问题。

导航图标没有出现在移动版本上？

1 个答案: