CSS 多张背景图片的背景尺寸

Question

我需要将其中一张图片上传至 background-size:100%;，但将另外两张图片保留为自动。我不确定你是怎么做到的 shorthand.

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;

CSS 多张背景图片的背景尺寸

CSS background size on multiple background images

css

background

background-image

background-size