網站標題在兩台不同的計算機上顯示不同

Question

我遇到了一些我認為不可能的事情，但是對於同一個網站，我在兩台不同的機器上顯示了不同的標題，其中一台顯示正常，另一台顯示一團糟。 這是PC上的顯示，這是正確的，這是損壞的標題，顯示在我的筆記本電腦上。 我不知道為什么圖像會這樣拼接，我嘗試使用background-repeat : no-repeat ，但它只是在頁面中間分割圖像。 這是我的 HTML：

<!DOCTYPE html>
<html lang = "fr">
    <head>
        <title>Agence ReArt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href = "ReArt.css" rel = "stylesheet" media = "all" type = "text/css">
    </head>
        <body>
            <header id = bannière>
                <h1>ReArt</h1>
                <button id = "centerButton" class = "button">Placeholder</button>
                <button id = "rightButton" class = "button">Nous contacter</button>
                <button id = "leftButton" class = "button">Nous découvrir</button>
            </header>
            
        </body>
    
</html>

還有我的 CSS：

header#bannière {
    display : center;
    height : 225px;
    max-width: 100%;
    align-items : center;
    color : #1BBCED;
    text-shadow : #000 0 0 .2em;
    background-image : url(./Ressources/landscape.jpg);
}
header#bannière > h1 {
    font: bold calc(1em + 2 * (100vw - 120px) / 100) 'Dancing Script', cursive, fantasy;
    text-align : center;
}
.button {
    margin : 0;
    position : absolute;
    -ms-transform: translate(-50%, -50%);
    transform : translate(-50%, -50%);
    background-color: transparent;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font : bold calc(1em + 2 * (50vw - 80px) / 100) 'Dancing Script', cursive, fantasy;
    white-space: nowrap;
}
button#centerButton {
    top : 25%;
    left : 50%;
}
button#rightButton {
    top: 25%;
    left: 90%;
}
button#leftButton {
    top: 25%;
    left: 10%;
}
body {
    background-color : white; /* #A55C9F #1BCCED #243797 */
}

這顯然不是專業的，只不過是一個學校項目，但不知道如何解決這個問題，甚至不知道它來自哪里，這很煩人。 謝謝誰願意花時間回答我的問題！

Answer 1

您可能正在尋找background-size: cover與background-repeat: no-repeat相結合的標題圖像。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

您應該將背景圖像的寬度設置為 100vw。 它轉換為 100% 的視口寬度，這意味着圖像現在將占據 100% 的可用屏幕寬度，與其實際大小無關。

網站標題在兩台不同的計算機上顯示不同

問題描述

2 個解決方案

解決方案1
0 2021-09-17 18:20:11

解決方案2
0 2022-05-21 12:40:15

網站標題在兩台不同的計算機上顯示不同

問題描述

2 個解決方案

解決方案1 0 2021-09-17 18:20:11

解決方案2 0 2022-05-21 12:40:15

解決方案1
0 2021-09-17 18:20:11

解決方案2
0 2022-05-21 12:40:15