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

Question

我需要将其中一张图片设为 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;

Answer 1

From MDN :

The <bg-size> value may only be included immediately after <position>, separated with the / character, like this: 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;