Question

我正在尝试在此网站中放置整体背景图像，但是当我在其中键入代码时却没有出现，我认为这是由于视差图像，有没有办法让背景图像出现。我认为背景图片位于其他所有内容的背后，也许是一种将其推广的方法？

HTML：

<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 >

    <div class="title">
        <img src="images/Logo.png" alt="Croydon Cycles" align="center">
    </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>
    <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="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>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    background: url(background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

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('images/background-1.jpeg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 400px;
    min-height: 400px;


}

.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: 92%;
    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;
}

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;
}

Answer 1

在CSS中添加z-index来更改顺序：

body {
    width: 100%;
    height: 100%;
    background: url(background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    z-index: 1;
}
.parallax {
    background: url('images/background-1.jpeg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 400px;
    min-height: 400px;
    z-index: -1;
}

如果主体的z-index大于视差背景的z-index，则会将其作为背景。

如何在视差网站中添加正常背景

1 个答案: