Question

我在网站上添加了背景，但是背景图像没有覆盖菜单的左侧和右侧，我认为这是因为菜单边框被扩展了，所以我添加了彩色边框以查看是否为真但是菜单的边框仅在菜单周围，所以我很困惑为什么背景图片没有显示

* {
        margin: 0;
        padding: 0;
    }
    
    body {
        width: 100%;
        height: 100%;
        background: url(https://placekitten.com/200/300);
        background-position: center;
        background-repeat: no-repeat;
        display: block;
        
        background-size: cover;
        background-attachment: fixed;
    }
    
    p {
        font-family: 'Karla', sans-serif;
        margin: 2.5%;
        padding:0;
    }
    .title {
        text-align: center;
    }
    .container {
        
        margin: 0 auto;
        background: #f9f9f9;
        font-size: 24px;
        object-fit: cover;
        
    }
    
    .parallax {
        background: url('https://placekitten.com/400/300') no-repeat center;
        background-size: cover;
        background-attachment: fixed;
        height: 400px;
        min-height: 400px;
        z-index:-1;
        
       
    }
    
    .b1{
        text-align: center;
    }
    
    .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        position: absolute;
        top: 82%;
        left: 42.5%;
    }
    
    .pic-1{
        height:280px; 
        width:420px;
        float: left;
        padding-left: 100px;
    }
    
    
    .pic-2{
        height:280px; 
        width:420px;
        float: right;
        padding-right: 100px;  
        
    }
    
    #Header-1 {
        font-family: 'Lobster', cursive;
        font-size: 35px;
    }
    
    ul {
        margin: 0 auto;
        width: 350px;
        border: 2px solid  red;
        overflow: hidden;
    }
    
    ul li{
        list-style: none;
        display: inline-block;
        float: left;
        line-height: 100px;
        
    
    }
    
    ul li a{
        display: block;
        text-decoration: none;
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
        color: #1e1e1e;
        padding:0px 20px;
        
    }
    
    
    
    #nav {
        width:100%;
        height:80px;
        background-color:#fff;
    }

<html>
    
    <head>
        <title>Croydon Cycles</title>
        <link rel="shortcut icon" type="image/png" href="images/favicon.png">
        <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
        <link href="style.css" rel= "stylesheet" type="text/css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="parallax.min.js"></script>
    </head>
    
    <body background="background.jpg" z-index="1">
    
        <div class="title">
            <h1>Croydon Cycles</h1>
        </div>
        <div class="menu">
    
            <nav id="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="shop.html">Shop</a></li>
                    <li><a href="location.html">Location</a></li>
    
                </ul>
            </nav>
    
        </div>
        
        
        <div class="container">
                
            
                
            <div class="parallax" data-parallax="scroll" data-z-index="-1">
                <div class="b1">
                    <a href="shop.html">
                        
                        <input type="button" class="button" value="view all bikes" >
                    </a>
                </div>
    
            
                    
                
            </div>
            
            
            
        </div>
        <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
            all areas of cyclesports. The club has a rich history of racing both on the 
            road and track. We also have an active social side and regular training trips away. 
            Croydon Cycles is located in mostly around Thornton heath pond, 
            however we still are active around all of Croydon.</p>
    
    
        <div class="profiles">
    
                <p id="Header-1">Here are some of the members of Croydon Cycles:</p>
            
            <div class="pic-1">
                <img src="images/profile-1.jpg" alt="Proffesional biker"  height="280px" width="420px">
                <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                        all areas of cyclesports. The club has a rich history of racing both on the 
                        road and track. We also have an active social side and regular training trips away. 
                        Croydon Cycles is located in mostly around Thornton heath pond, 
                        however we still are active around all of Croydon.</p>
            </div>
    
    
            
            <div class="pic-2">
            <img src="images/profile-2.jpg" alt="Proffesional biker"  height="280px" width="420px">
            <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                    all areas of cyclesports. The club has a rich history of racing both on the 
                    road and track. We also have an active social side and regular training trips away. 
                    Croydon Cycles is located in mostly around Thornton heath pond, 
                    however we still are active around all of Croydon.</p>
            </div>
        </div>
    
    </body>

    </html>

Answer 1

有2个问题：

1）background: url(images/background.jpg);缺少单引号

2）background-color:#fff;在#nav

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    background: url('data:image/jpeg;base64,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');
    background-position: center;
    background-repeat: no-repeat;
    display: block;

    background-size: cover;
    background-attachment: fixed;
}

p {
    font-family: 'Karla', sans-serif;
    margin: 2.5%;
    padding:0;
}
.title {
    text-align: center;
}
.container {

    margin: 0 auto;
    background: #f9f9f9;
    font-size: 24px;
    object-fit: cover;

}

.parallax {
    background: url('data:image/jpeg;base64,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') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 400px;
    min-height: 400px;
    z-index:-1;


}

.b1{
    text-align: center;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    position: absolute;
    top: 82%;
    left: 42.5%;
}

.pic-1{
    height:280px; 
    width:420px;
    float: left;
    padding-left: 100px;
}


.pic-2{
    height:280px; 
    width:420px;
    float: right;
    padding-right: 100px;  

}

#Header-1 {
    font-family: 'Lobster', cursive;
    font-size: 35px;
}

ul {
    margin: 0 auto;
    width: 350px;
    // border: 2px solid  red;
    overflow: hidden;
}

ul li{
    list-style: none;
    display: inline-block;
    float: left;
    line-height: 100px;


}

ul li a{
    display: block;
    text-decoration: none;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    color: #1e1e1e;
    padding:0px 20px;

}



#nav {
    width:100%;
    height:80px;
    // background-color:#fff;
}

<html>

<head>
    <title>Croydon Cycles</title>
    <link rel="shortcut icon" type="image/png" href="images/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
    <link href="style.css" rel= "stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="parallax.min.js"></script>
</head>

<body background="background.jpg" z-index="1">

    <div class="title">
        <h1>Croydon Cycles</h1>
    </div>
    <div class="menu">

        <nav id="nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="shop.html">Shop</a></li>
                <li><a href="location.html">Location</a></li>

            </ul>
        </nav>

    </div>


    <div class="container">



        <div class="parallax" data-parallax="scroll" data-z-index="-1">
            <div class="b1">
                <a href="shop.html">

                    <input type="button" class="button" value="view all bikes" >
                </a>
            </div>




        </div>



    </div>
    <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
        all areas of cyclesports. The club has a rich history of racing both on the 
        road and track. We also have an active social side and regular training trips away. 
        Croydon Cycles is located in mostly around Thornton heath pond, 
        however we still are active around all of Croydon.</p>


    <div class="profiles">

            <p id="Header-1">Here are some of the members of Croydon Cycles:</p>

        <div class="pic-1">
            <img src="images/profile-1.jpg" alt="Proffesional biker"  height="280px" width="420px">
            <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                    all areas of cyclesports. The club has a rich history of racing both on the 
                    road and track. We also have an active social side and regular training trips away. 
                    Croydon Cycles is located in mostly around Thornton heath pond, 
                    however we still are active around all of Croydon.</p>
        </div>



        <div class="pic-2">
        <img src="images/profile-2.jpg" alt="Proffesional biker"  height="280px" width="420px">
        <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                all areas of cyclesports. The club has a rich history of racing both on the 
                road and track. We also have an active social side and regular training trips away. 
                Croydon Cycles is located in mostly around Thornton heath pond, 
                however we still are active around all of Croydon.</p>
        </div>
    </div>

</body>

</html>

网站的背景未覆盖菜单栏的左侧和右侧

1 个答案: