个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 01:17:30 24 4
gpt4 key购买 nike

我想在这个网站上放一张整体背景图片，但是当我在里面输入代码时，它没有出现，我想这是因为视差图像，有没有办法让背景图片出现。我认为背景图像在其他所有内容的背后，也许是一种将其向前推进的方式？

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

最佳答案

在您的 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;
}

如果 body 的 z-index 大于视差背景的 z-index，则 body 背景将被认为在顶部。

关于html - 如何在视差网站中添加正常背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51734281/

24 4 0
文章推荐： php - 使用 PHP 格式化 SQL 数据并将其插入 HTML(网页)
文章推荐： javascript - 当 nsIProcess 的 Firefox 启动失败时如何捕获错误
文章推荐： javascript - ember.js 中的应用程序路由模型
文章推荐： html - 使用纯 Bootstrap 4.1.3 动态对齐内容的具体问题？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com