如何在背景图片中央添加指定透明水平线？

嘿，我来帮你搞定这条透明水平线！你现在的渐变思路完全没问题，只需要去掉背景图，再微调参数就能单独实现，另外还有更灵活的伪元素方案，我都给你梳理清楚：

直接用linear-gradient作为唯一背景，通过调整色标位置，把灰色区域压缩成一条细横线，上下保持透明：

.login {
  /* 生成一条1px高的灰色线，垂直居中显示 */
  background: linear-gradient(transparent 49.5%, #aaaaaa 49.5%, #aaaaaa 50.5%, transparent 50.5%);
  background-size: 100% 100%;
}

如果想要线更粗（比如2px），就修改百分比：

background: linear-gradient(transparent 49%, #aaaaaa 49%, #aaaaaa 51%, transparent 51%);

要是想把线固定在你原来的位置（距离顶部20%），可以用background-position配合background-size精准控制：

.login {
  background: linear-gradient(transparent, #aaaaaa, transparent);
  /* 把渐变高度限制为2px，定位到顶部20%的位置 */
  background-size: 100% 2px;
  background-position: 0 20%;
  background-repeat: no-repeat;
}

用伪元素的好处是完全不影响元素本身的背景，后期调整位置、粗细、透明度都更自由：

.login {
  position: relative; /* 给伪元素提供定位参考 */
}

.login::after {
  content: "";
  position: absolute;
  left: 0; /* 线的宽度和元素一致 */
  top: 20%; /* 和你原来的位置匹配，距离顶部20% */
  width: 100%;
  height: 1px; /* 线的粗细 */
  /* 用rgba可以直接设置线的透明度，比如最后一个参数设为0.5就是半透明 */
  background-color: rgba(170, 170, 170, 1);
}

要是想让线左右留出空隙，比如各10px，只需要改成：left: 10px; width: calc(100% - 20px);

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