双背景但仅指定一个

Question

我正在尝试学习 html 但我遇到了这个问题：

我不知道为什么，但我的背景无缘无故地重复...这是我的CSS主体（因为问题似乎与主体有关），如果我在我的卡的机器人上放置一个巨大的组件（我是 MisTale 等...）

[...]
<div class="group">
    <div class="animated-background"></div>
    <div class="animated-background-solid"></div>
    <div class="size-slot-container">
        <div class="slot-container">
            <div class="intro">
                <p class="greeting">Hey 👋</p>
                <h1 class="name">I'm MisTrale 🦅</h1>
                <h2 class="role">FullStack Developer <span style="color: red;">Engineer</span></h2>
                <p class="description">
                    I want to be a <span style="color: red;"> Full-Stack </span> Developer specializing in <span style="color: blue;">front-end</span>, <span style="color: blue;">back-end</span>, and <span style="color: blue;"> mobile </span> development using Flutter. 
                    I am passionate about creating seamless and efficient applications that provide real value. 
                    Actively seeking opportunities to leverage my skills in meaningful projects and contribute to the growth of the tech industry.
                </p>
            </div>
        </div>
    </div>
</div>
<div class="aboutme">
</div>
<style>
    .aboutme {
        height: 900px;
    }
</style>

谢谢你们！

[...]
body {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    height: 100vh;
    min-height: 100vh;
  
    color-scheme: light dark;
    background-image: radial-gradient(at center, #0d1d31 0%, #0c0d13 100%);
  
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[...]

Answer 1

CSS3 有一个背景大小属性，即background-size。 您可以设置长度值，通常根据您的要求与特殊值“包含”和“覆盖”一起使用。

body {
    background-image:    url(images/background.png);
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;
}