Html 如何将渐变应用于（固定宽度）响应的图像？

我不知道如何解释我的问题。这是一把小提琴：

.background img wrapper:之前{ 内容：； 排名：0； 左：0； 位置：绝对位置； 身高：100%； 宽度：100%； 背景：向右线性梯度，RGBA252252252，1 0%，rgba255，255，0 20%，rgba255，255，255，0 80%，RGBA252252，252，1 100%； } .背景img包装{ 最大宽度：1920像素； } .背景：以前{ 内容：； 排名：0； 左：0； 位置：绝对位置； 身高：100%； 宽度：100%； 背景：底部线性梯度，rgba255，255，255，0 0%，rgba255，255，255，0 80%，rgba252，252，252，1 100%； } .背景{ 宽度：100%； } 我将用较小的值替换1920px，这样我们可以更好地看到结果

一个简单的解决方法是添加位置：相对并调整z索引，如下所示：

.background img wrapper:之前{ 内容：； 排名：0； 左：0； 位置：绝对位置； 身高：100%； 宽度：100%； 背景：向右线性梯度，RGBA252252252，1 0%，rgba255，255，0 20%，rgba255，255，255，0 80%，RGBA252252，252，1 100%； } .背景img包装{ 最大宽度：400px； 位置：相对；/*已添加*/ } .背景：以前{ 内容：； 排名：0； 左：0； 位置：绝对位置； z索引：1；/*已添加*/ 身高：100%； 宽度：100%； 背景：底部线性梯度，rgba255，255，255，0 0%，rgba255，255，255，0 80%，rgba252，252，252，1 100%； } .背景{ 宽度：100%； }

---

位置：相对于。背景img包装？嗯，谢谢你的建议！这在将左/右渐变限制到图像的侧面方面确实有效。但它重新移动了我的底部梯度；到另一个梯度哇，真管用！非常感谢！如果你把它贴成完整答案，如果你愿意，我可以把它标记为解决方案。如果您愿意，还有一个附带的问题：是否有可能完全摆脱背景img包装器？我觉得这有点没用。不管怎样，我的主要问题已经解决了。再次感谢！：工作起来很有魅力，看起来简单多了。谢谢你，伙计@Landcross增加了另一个简化；