CSS线性渐变多次显示

Question

我在 HTML 网站的 CSS 中实现了线性渐变效果。然而，在查看它时，我注意到渐变被显示了多次。

就上下文而言，我的网站由 nginx 提供支持，我使用 Express.js 和 EJS 进行服务器端渲染。

任何有关如何解决此问题的见解或建议将不胜感激。

* {
    margin: 0;
    font-family: Roboto,Arial,sans-serif;
    font-weight: bold;
    
}

@font-face {
    font-family: 'Mokoto Glitsch 2';
    src: url('../fonts/mokoto-mokoto-regular-glitch-mark-2-400.ttf') format('truetype');
    
}

body {
    background: linear-gradient( #D077E8, #01536C);
    background-size: cover;
    user-select: none;
    overflow: hidden;
}

header {
    position: relative; 
    width: 100%;
    height: 70px;
    color: white;
    background-color: #010F27;
}

.server-tool-text {
    font-family: 'Mokoto Glitsch 2', Arial, sans-serif;  
    line-height: normal;
    margin-top: 7px;
}

.logo {
    float: left;
    font-size: 25px;
    margin-left: 30px;
    height: 70px;
    display: flex;
    align-items: center;
}

.profile-picture {
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    object-fit: cover; 
    margin-right: 10px;
}
.profile-name {
    margin-right: 10px;
}

.user-menu {
    float: right;
    margin-right: 10px;
    text-decoration: none;
    height: 70px;
    display: flex;
    align-items: center;
}

.user-menu a {
    text-decoration: none;
    margin-right: 20px;
    color: white;
}

.menu {
    float: left;
    margin-left: 40px;
    text-decoration: none;
    height: 70px;
    display: flex;
    align-items: center;
}

.user-menu a {
    text-decoration: none;
    margin-right: 20px;
    color: white;
}

.menu-button {
    font-size: 15px;
    margin-left: 15px;
    color: white;
    background-color: #010F27;
    width: 150px;
    height: 40px;
    border-radius: 5px;
    border: None;
    transition: background-color 0.3s;
}

.menu-button:hover {
    cursor: pointer;
    background-color: rgb(8, 9, 22);
    transition: background-color 0.3s;
}

.log-in {
    font-size: 14px;
    color: white;
    background-color: #010F27;
    width: 80px;
    height: 40px;
    border-radius: 5px;
    border: None;
    transition: background-color 0.3s;
}

.log-in:hover {
    cursor: pointer;
    background-color: rgb(8, 9, 22);
    transition: background-color 0.3s;
}

.log-out {
    font-size: 14px;
    color: white;
    background-color: #ff0000;
    width: 80px;
    height: 40px;
    border-radius: 5px;
    border: None;
    transition: background-color 0.3s;
}

.log-out:hover {
    cursor: pointer;
    background-color: #690101;
    transition: background-color 0.3s;
}

.invite-button {
    font-size: 20px;
    margin: 0;
    position: absolute;
    top: 75%;
    left: 40%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: #010F27;
    outline: 2px solid #00367c;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    border: None;
    transition: background-color 0.3s;
}

.invite-button:hover {
    cursor: pointer;
    background-color: rgb(8, 9, 22);
    outline: 2px solid #003f91;
    box-shadow: 0 0 10px 2px rgba(0, 162, 255, 0.7);
    transition: background-color 0.3s;
    transition: outline 0.3s;
    transition: box-shadow 0.3s;
}

.dashboard-button {
    font-size: 20px;
    margin: 0;
    position: absolute;
    top: 75%;
    left: 60%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: #010F27;
    outline: 2px solid #00367c;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    border: None;
    transition: background-color 0.3s;
}

.dashboard-button:hover {
    cursor: pointer;
    background-color: rgb(8, 9, 22);
    outline: 2px solid #003f91;
    box-shadow: 0 0 10px 2px rgba(0, 162, 255, 0.7);
    transition: background-color 0.3s;
    transition: outline 0.3s;
    transition: box-shadow 0.3s;
}


.titel {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 800px;
    transform: translate(-50%, -50%);
    padding: 10px;
    color: white; 
    
}
.titel-subtitel {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, 50%); 
    width: 500px;
    padding: 10px;
    color: white;
    text-align: center; 
}

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Server Tool</title> 
    <base href="https://servertool.xyz/">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link rel="icon" type="image/ico" href="assets/favicon.ico">
</head>

<body>
    <header>
        <span class="logo">
            <img src="assets/img/servertool-logo.png" style="width: 65px; height: 65px; border-radius: 20%;" />
            &nbsp;
            <span style="color: white; font-weight:900;" class="server-tool-text">Server Tool</span>

        </span>
        <span class="menu">
            <a href='https://servertool.xyz/support'><button class='menu-button'>Support Server</button></a>
            <a href='https://servertool.xyz/docs'><button class='menu-button'>Documentation</button></a>
        </span>
        <span class="user-menu">
            <a href='https://servertool.xyz/login'><button class='log-in'>Login</button></a>
        </span>
    </header>

    <h1 style="font-weight:900; font-size: 24px; white-space: pre-line; " class="titel">
        <span style="color: white; font-weight:800; font-size: 30px;">Server Tool App and Website are in Development</span>
        <span style="color: white; font-weight:900;  font-size: 15px;" class="titel-subtitel">You can finde more information on our Support Server</span>
    </h1>
    <a><button onclick="inviteServerTool()" class="invite-button">Invite Server Tool</button></a>
    <a><button onclick="gotodashboard()" class="dashboard-button">Dashboard</button></a>

<script>
     function inviteServerTool() {
        var url = "https://discord.com/oauth2/authorize?client_id=1236000476143685762&permissions=8&scope=bot+applications.commands";
        var width = 450;
        var height = 750;
        var left = 0;
        var top = 0;
        window.open(url, "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
        }

        function gotodashboard() {
            window.location.href = `https://servertool.xyz/dashboard`;
        }
</script>

</body>

</html>

Answer 1

为您的 body 标签 CSS 添加“background-attachment”属性

body {
    background: linear-gradient( #D077E8, #01536C);
    background-size: cover;
    user-select: none;
    overflow: hidden;
    background-attachment: fixed;
}

background-attachment CSS 属性设置背景图像的位置是固定在视口内，还是随其包含块滚动

供参考https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment