如何垂直底部对齐线性渐变？background-position设置无效求助

你当前的代码里，background-size: 88px 100px 让渐变tile的高度和容器高度完全一致，再加上默认的从上到下渐变，灰色部分固定在tile顶部，所以设置background-position: left bottom也看不到效果——tile本身已经填满容器，顶部对齐和底部对齐的视觉表现没有区别。

要实现渐变在左下角垂直底部对齐（即灰色部分位于容器底部），可以通过修改渐变方向来实现：

.skeleton-6euk0cm7tfi:empty {
  height: 100px;
  background-color: #ffffff;
  border-radius: 0;
  /* 修改渐变方向为从下到上，让灰色部分在底部 */
  background-image: linear-gradient(to top, #676b6f 6px, transparent 0);
  background-repeat: repeat-y;
  background-size: 88px 100px;
  background-position: left bottom;
}

如果不想改变渐变方向，也可以调整渐变的颜色起止点，让灰色部分出现在底部区域：

.skeleton-6euk0cm7tfi:empty {
  height: 100px;
  background-color: #ffffff;
  border-radius: 0;
  /* 让前94px为背景色，底部6px为灰色 */
  background-image: linear-gradient(#ffffff 94px, #676b6f 0);
  background-repeat: repeat-y;
  background-size: 88px 100px;
  background-position: left bottom;
}

两种方法都能让灰色渐变块固定在容器左下角的底部区域，水平方向每88px重复一次。

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