多个背景图像上的 CSS 背景大小

【问题标题】：CSS background size on multiple background images多个背景图像上的 CSS 背景大小
【发布时间】：2019-08-18 02:57:28
【问题描述】：

我需要将其中一张图片发送到background-size:100%;，但将另外两张保留为自动。我不确定你是怎么做这个速记的。

background: url(/assets/images/site/bg-hero-l.svg) left top no-repeat,
            url(/assets/images/site/bg-hero-r.svg) right top no-repeat,
            url(/assets/images/site/hero-banner.jpg) top no-repeat fixed;

【问题讨论】：

标签： css background background-image background-size

【解决方案1】：

From MDN:

<bg-size> 值只能紧跟在<position> 之后，用/ 字符分隔，如下所示：center/80%。

因此，您需要根据哪些背景需要 100% 大小来执行此类操作：

background: url(/assets/images/site/bg-hero-l.svg) left top no-repeat,
            url(/assets/images/site/bg-hero-r.svg) right top no-repeat,
            url(/assets/images/site/hero-banner.jpg) top/100% no-repeat fixed;

【讨论】：