如何实现垂直胶片条纹效果？修改background-repeat未成功求助

原水平胶片效果通过多组线性渐变组合实现，改成垂直效果需要调整渐变方向、背景尺寸、位置及重复规则，以下是修改后的完整代码及说明：

修改后的CSS代码 #

.filmstrip-vertical {
  --background: rgba(0, 0, 0, .35);
  --size: 10px;
  background-image:
    /* 左侧垂直齿状条纹 */
    linear-gradient(to bottom, var(--background) var(--size), transparent var(--size)),
    /* 顶部水平边条 */
    linear-gradient(to right, var(--background) var(--size), transparent var(--size)),
    /* 右侧垂直齿状条纹 */
    linear-gradient(to bottom, var(--background) var(--size), transparent var(--size)),
    /* 底部水平边条 */
    linear-gradient(to right, var(--background) var(--size), transparent var(--size)),
    /* 中间垂直分隔条 */
    linear-gradient(to right, transparent var(--size), var(--background) var(--size));
  background-size:
    var(--size) calc(var(--size) * 2),
    calc(var(--size) * 2) var(--size),
    var(--size) calc(var(--size) * 2),
    calc(var(--size) * 2) var(--size),
    calc(100% - var(--size) * 3) 100%;
  background-repeat: repeat-y;
  background-position:
    var(--size) 0,
    left top,
    calc(100% - var(--size)) 0,
    left bottom,
    var(--size) 0;
  padding: calc(var(--size) * 2.5) calc(var(--size) * 3);
  box-sizing: border-box;
}

HTML代码 #

<div class="filmstrip-vertical">
  <h1>Stuff in the Vertical Film Strip</h1>
</div>

关键调整点 #

• 渐变方向：互换原水平（to right）与垂直（to bottom）渐变的方向，适配垂直胶片的视觉结构
• 背景尺寸：交换每个渐变的宽高参数，确保齿状条纹和边条在垂直方向上的比例正确
• 背景位置：调整坐标值，让条纹分别对齐容器的左右两侧及上下边缘
• 重复规则：将repeat-x改为repeat-y，使条纹沿垂直方向重复排列
• 内边距：互换上下与左右的内边距数值，保证内容与胶片边框的间距合理

内容的提问来源于stack exchange，提问作者Hồ Đạt Tấn