为何background-size属性对background-color无效果？如何设置背景色非全屏？

嘿，这个问题我太熟悉了！你设置background-size没效果的核心原因很简单：background-size属性只对背景图片生效，对纯色的background-color完全不起作用😯。

你想要的是「元素宽度占满全屏，但背景色只显示80%宽度」的效果，得换思路实现，给你推荐几个常用方案：

方案1：使用伪元素（最推荐，不额外增加DOM） #

给nav设置相对定位，用伪元素承载背景色，让伪元素居中且宽度为80%：

nav {
  width: 100%;
  height: 100px;
  position: relative; /* 为伪元素提供定位基准 */
}

nav::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: 80%;
  height: 100%;
  background-color: black;
}

方案2：用线性渐变模拟背景色 #

把背景设置成线性渐变，左右各留10%透明区域，中间80%显示黑色：

nav {
  width: 100%;
  height: 100px;
  background: linear-gradient(
    to right,
    transparent 10%,
    black 10%,
    black 90%,
    transparent 90%
  );
}

方案3：嵌套内部元素（最直观） #

在nav里加一个子元素，让nav占满全屏，子元素负责显示80%宽度的背景：
修改后的HTML：

<header>
  <nav>
    <div class="nav-content"></div>
  </nav>
</header>

对应的CSS：

nav {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center; /* 让子元素水平居中 */
}

.nav-content {
  width: 80%;
  height: 100%;
  background-color: black;
}

这几个方案都能实现你要的效果，按需选择就行～

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