【问题标题】: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;
      }

      【讨论】: