父元素为position:fixed时子元素background-attachment:fixed的实现问题

问题根源：当父元素设置position:fixed时，它会形成一个新的包含块，子元素的background-attachment:fixed会相对于这个父元素的视口，而非整个页面的视口，导致背景无法按预期固定在页面上。

以下是两种可行的解决方案：

方法一：父元素承载背景，用clip-path裁剪显示区域 #

将波浪背景直接设置在父元素上，利用clip-path只显示四个按钮对应的区域，这样背景的fixed属性会相对于整个页面视口生效，同时只在按钮区域可见。

示例代码：

#social-media {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  /* 设置共用的波浪背景，fixed属性生效 */
  background: url('你的波浪背景图地址') fixed no-repeat center / cover;
  /* 假设每个按钮宽50px、高50px，按钮间间距10px，总高度为 50*4 + 10*3 = 230px */
  width: 50px;
  height: 230px;
  /* 用clip-path裁剪出四个按钮的区域，其余部分隐藏 */
  clip-path: polygon(
    /* 第一个按钮区域 */
    0 0, 100% 0, 100% 50px, 0 50px,
    /* 间隔区域隐藏 */
    0 50px, 0 60px, 100% 60px, 100% 50px,
    /* 第二个按钮区域 */
    0 60px, 100% 60px, 100% 110px, 0 110px,
    /* 间隔区域隐藏 */
    0 110px, 0 120px, 100% 120px, 100% 110px,
    /* 第三个按钮区域 */
    0 120px, 100% 120px, 100% 170px, 0 170px,
    /* 间隔区域隐藏 */
    0 170px, 0 180px, 100% 180px, 100% 170px,
    /* 第四个按钮区域 */
    0 180px, 100% 180px, 100% 230px, 0 230px
  );
}

.social-media-button {
  display: block;
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background: transparent; /* 透明背景，让父元素的背景透出来 */
  border: none;
  cursor: pointer;
}

/* 移除最后一个按钮的底部间距 */
.social-media-button:last-child {
  margin-bottom: 0;
}

方法二：按钮伪元素共用对齐的fixed背景 #

给每个按钮的伪元素设置相同的fixed背景，通过CSS变量控制背景位置，让四个按钮的背景完全对齐，看起来是同一张图。

示例代码：

#social-media {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-media-button {
  position: relative;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: none;
  cursor: pointer;
}

.social-media-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 共用的波浪背景，fixed属性相对于页面视口 */
  background: url('你的波浪背景图地址') fixed no-repeat center / cover;
  /* 通过CSS变量调整每个按钮的背景偏移，确保对齐 */
  background-position: calc(20px) calc(50% - 115px + var(--button-offset));
  z-index: -1;
}

/* 设置每个按钮的偏移值，对应按钮在父元素中的位置 */
.social-media-button:nth-child(1) { --button-offset: 0px; }
.social-media-button:nth-child(2) { --button-offset: 60px; }
.social-media-button:nth-child(3) { --button-offset: 120px; }
.social-media-button:nth-child(4) { --button-offset: 180px; }

推荐优先使用方法一，代码更简洁易维护，只需要根据按钮的尺寸和间距调整clip-path的参数即可。

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