如何创建一个 100% 宽度的错觉，它实际上是固定宽度的（带 bg 颜色）[复制]-解网

问：

这个问题在这里已经有答案了：

在块本身和其中的文本上设置具有独立背景的块样式（1 个答案）

2年前关闭。

我身体的 bg 颜色是白色的，我有这个 div：

<div style="max-width:1140px;margin:0 auto;background-color:rgba(0,0,0,.50)">
    Lorum ipsum example
</div>

div 水平居中，bg 颜色为黑色，透明度为 50%。

我想为屏幕分辨率大于 1140w 的访问者模拟 div 左侧和右侧透明度为 50% 的黑色 bg 颜色，而无需将其包装在容器 div 中，如果可能的话。我认为这可能是不可能的。

我想过边框，但你不能用百分比设置边框宽度。

编辑：这是一把小提琴，应该清楚地描绘出我所追求的画面

CSS的

评论

0赞 Rana 10/3/2021

目前尚不清楚您要实现什么，更具体或用图像说明您想要什么

0赞 Jeff 10/3/2021

@Rana 请参阅上面的小提琴链接

0赞 Azu 10/3/2021

您可以将颜色涂成灰色，并将固定宽度的 div 保留在其中心。body

0赞 Jeff 10/3/2021

@Azu 这是一个很好的建议，但在这种情况下对我不起作用

0赞 Azu 10/3/2021

为什么包装器是个问题？另一个想法是使用 and，但我不确定它是否会以您喜欢的方式工作。:before:after

答：

0赞 Rana 10/3/2021 #1

您也可以根据需要使用 or 来实现相同的目的::after::before

这仅用于演示，您可以根据需要更改样式

.orignDiv {
  max-width: 1140px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, .50)
}

.orignDiv::after {
  content: "";
  width: 100%;
  height: 18px;
  position: absolute;
  left: 0;
  background-color: red;
  z-index: -1;
}

<div class="orignDiv">
  Lorum ipsum example
</div>

此外，您还可以通过不缠绕在主要周围的额外功能来实现divdiv

.orignDiv {
  max-width: 1140px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, .50)
}

.withoutWrap {
  position: relative;
  background-color: rgba(20, 0, 0, .50);
  width: 100%;
  height: 18px;
  top: -20px
}

<div class="orignDiv">
  Lorum ipsum example
</div>
<div class="withoutWrap"></div>

评论

0赞 Jeff 10/3/2021

不，不幸的是，它不是因为额外的 div

0赞 Rana 10/3/2021

改变答案，看看这是否是你想要的@Jeff::after::before

0赞 Rana 10/3/2021

如果它有助于您的问题，您也可以对答案投赞成票：）

上一个：如何在未找到结果时显示消息

下一个：我的第一个 JavaScript。有什么错误吗？