如何移除fullPage.js中第一个section的浅色背景？

我明白你遇到的问题了——用fullpage.js搭建页面时，第一个section顶部或边缘出现了烦人的浅色矩形，破坏了全屏单一颜色的效果。其实这个问题大多是浏览器默认样式或者fullpage的默认高亮样式导致的，下面给你几个简单的解决办法：

解决步骤： #

1. 清除浏览器默认的body边距 #

浏览器默认会给body设置少量margin，这往往是顶部出现白边/浅色矩形的元凶，先把它清除：

body {
  margin: 0;
  padding: 0;
}

2. 覆盖fullpage默认的激活section高亮样式 #

fullpage.js为了 accessibility，默认会给当前激活的section添加outline样式，有时候会显示成浅色边框，我们把它去掉：

.section.active {
  outline: none !important;
}

3. 确保fullpage容器占满全屏 #

有时候容器的尺寸设置不对也会导致缝隙，给容器加上全屏样式：

#fullpage, .fullpage-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

4. 确认sectionsColor配置正确 #

最后检查你的fullpage初始化代码，确保第一个section的颜色设置是你想要的单一颜色，比如：

$('#fullpage').fullpage({
  sectionsColor: ['#2c3e50', '#3498db', '#e74c3c', '#2ecc71'],
  // 其他你需要的配置项
});

把这些代码添加到你的样式表和脚本里，就能让第一个section完全铺满屏幕，看不到那个浅色矩形啦！

内容的提问来源于stack exchange，提问作者Vikram