具有线性梯度溢出的多个背景图像

Question

我的codepen显示此介绍页面背景图片，其中第二个多重背景图片包含线性渐变。问题是当浏览器调整大小时图像减少并且线性渐变保持相同的高度。如何动态更改渐变高度以匹配第一个背景图像高度？

注意：我不想使用background-size: cover，因为它会切断太多图像。

导航栏和背景图像之间的体差（颜色：＃454545）似乎特别适合于编码。当我在本地运行网页时，它不会出现。

Answer 1

根据我的经验，当周围环境发生变化时，CSS并不灵活。我想到了两种解决方案。

1. 使用JS根据当前框大小动态添加内联CSS
2. 根据您的需求创建多个媒体查询