向css添加多个背景图像和背景颜色答案

【问题标题】：Adding multiple background images and background colors to css向css添加多个背景图像和背景颜色
【发布时间】：2023-02-21 21:18:17
【问题描述】：

所以我试图在我的 css 主体中添加两个背景图像，但是当我这样做时，它不会只执行两个图像，只执行第一个图像。然后我尝试执行两种背景颜色，但再次没有执行。无论如何我可以解决这个问题吗？

身体{

背景图像： url("https://garden.spoonflower.com/c/6352249/p/f/l/jwkc2F7Ud3R3T9PlYkBODNtUwLKbyglqcoyRW3raDn-TUIAtnl0/Dark%20Mulberry%2C%20Solid%20Colour.jpg"), url("https://garden. spoonflower.com/c/4277276/p/f/m/FbshAkngoexiw8kWbTJQ1FN8mihBoks9G3hV09i7nbwB9RzM0gQY_LD8/solid%20pale%20pastel%20purple%20(EEE0FF).jpg");

}

我试着把两张图片都放上，但没有同时显示

【问题讨论】：

标签： css image background

【解决方案1】：

    body {
    Background-image: url("https://garden.spoonflower.com/c/6352249/p/f/l/jwkc2F7Ud3R3T9PlYkBODNtUwLKbyglqcoyRW3raDn-TUIAtnl0/Dark%20Mulberry%2C%20Solid%20Colour.jpg"), url("https://garden.spoonflower.com/c/4277276/p/f/m/FbshAkngoexiw8kWbTJQ1FN8mihBoks9G3hV09i7nbwB9RzM0gQY_LD8/solid%20pale%20pastel%20purple%20(EEE0FF).jpg");
    background-position: right bottom, left top;
    background-repeat: no-repeat, no-repeat;
}

<html>
<body>
<h1>Text</h1>
</body>
</html>

【讨论】：

【解决方案2】：

为防止一张图片覆盖另一张图片，您可以更改背景大小：

body {
  background-image: url("https://garden.spoonflower.com/c/6352249/p/f/l/jwkc2F7Ud3R3T9PlYkBODNtUwLKbyglqcoyRW3raDn-TUIAtnl0/Dark%20Mulberry%2C%20Solid%20Colour.jpg"), 
                    url("https://garden.spoonflower.com/c/4277276/p/f/m/FbshAkngoexiw8kWbTJQ1FN8mihBoks9G3hV09i7nbwB9RzM0gQY_LD8/solid%20pale%20pastel%20purple%20(EEE0FF).jpg");
  background-position: center, center;
background-size: 50%, cover;
  background-repeat: no-repeat;
}

【讨论】：