如何在不使用外层容器的情况下为固定宽度div设置全屏宽度背景

可以实现，无需额外外层容器，以下是两种可直接落地的方案：

方案1：调整盒模型，元素本身铺满视口、内容区域居中 #

该方案逻辑简单兼容性好，修改后的div.one CSS代码如下：

div.one {
  /* 元素本身占满全屏宽度 */
  width: 100%;
  box-sizing: border-box;
  /* 左右内边距自动计算，保证中间内容宽度固定为300px且居中 */
  padding-inline: max(0px, 50% - 150px);
  margin: 0;
  color: #fff;
  background-color: #1e1e1e;
  background-image: url("https://www.transparenttextures.com/patterns/circles.png");
  background-attachment: fixed;
}

实现逻辑：

• 元素宽度设置为100%占满父容器（默认父容器为body，宽度和视口一致）
• padding-inline是左右内边距的简写，50% - 150px的计算逻辑是视口一半宽度减去内容宽度的一半，刚好让中间内容区域固定为300px
• 背景会跟随元素本身铺满全屏，和原div.two效果完全一致

方案2：伪元素扩展背景区域 #

如果不方便修改div.one的原有宽度和盒模型，可以用伪元素生成全屏背景：

div.one {
  position: relative;
  width: 300px;
  margin: auto;
  color: #fff;
}
div.one::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* 左右延伸到视口边缘 */
  left: calc(-50vw + 150px);
  right: calc(-50vw + 150px);
  background-color: #1e1e1e;
  background-image: url("https://www.transparenttextures.com/patterns/circles.png");
  background-attachment: fixed;
  z-index: -1;
}

实现逻辑：

• 伪元素绝对定位在div.one的层级下方，左右延伸到视口边缘
• div.one本身的尺寸和布局完全不需要改动，仅扩展了背景区域

误区说明 #

你之前尝试的方案不可行的原因：

• clip-path的作用是裁剪元素的可见区域，只会保留裁剪路径内的内容，无法让背景展示到元素原有边界之外
• border-image理论上可以实现，但需要设置极宽的左右透明边框，调整非常繁琐，性价比远低于上面两种方案

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