时间戳

首页 > 解决方案 > 可滚动的背景图像仅覆盖页面的某些部分

html - 可滚动的背景图像仅覆盖页面的某些部分

问题描述

我需要你的帮助来解决这个问题。

我正在开发一个个人项目，并创建了一个与外部 index.css 链接的经典 index.html 文件。

我使用 css 网格来创建不同的内部部分，每个页面都有不同的内部网格结构。

所以这就是我的索引页面结构的样子：

- 左上角：带有徽标的 div。徽标本身是一个锚链接，可重定向到主页/登录页面；

- 右上角，在徽标旁边：带有导航栏的 div，带有 3/4 个链接（关于、联系方式等）

-主页面（中心）：在上面的两个 div 下方，我有一个主区域，用一些文本覆盖整个屏幕大小；

-第二页（中心下方）：在主页下方，带有图像和文字（您需要向下滚动页面）；

-底部：页脚。

现在我的意图是放置一个仅覆盖前 3 个部分（徽标、导航栏和主要区域）的背景图像，而将其他区域留给自己。它们将具有不同的颜色和内容。

重要的是背景图像应与页面一起向下滚动，并且不应保持粘性并固定在其自己的位置。它应该看起来好像是中心主页的背景图像，但事实并非如此。

如果我只将背景图像放在主页中，那么顶部 div 是无图像的，我希望背景图像也覆盖两个上部 div。如果我将相同的图像分别放入这 3 个主要 div 中，那么我冒着图像重叠的风险，并且在调整大小和使用媒体查询时很难看到并且难以管理。

现在我正在使用 css-grid 使其具有响应性并且只是简单的 css。有没有办法只用 css 创建这种类型的效果，或者我是否需要强制使用 css 框架（引导程序等）或以不同方式更改结构？

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="grid-container">
       
       <!-- LOGO AREA-->
        <div class="logo">

            <div class="logo">
                <a href="Index.html"><img id="logo" src="pic/white_logo.png" alt="logo"></a>
            </div>
        </div>
        
        
        <!-- NAVBAR AREA-->
        
        <div class="navbar">

            <ul class="nav-list">
                <a class="list" href="about.html"><li>about</li></a>
                <a class="list" href=""><li>skills</li></a>
                <a class="list" href=""><li>contact</li></a>
             </ul>


        </div>

<!-- MAIN PAGE AREA-->
        <div class="main-page">

            <h2>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum</h2>
            <a id="learn-more-button" href="">LEARN MORE</a>


        </div>

        <!-- SECOND PAGE -->

        <div class="second-page"></div>
<!-- FOOTER -->

        <div class="footer"></div>
      </div>
</body>
</html>

CSS


* {
    margin:0;
    padding:0;
}

body {
  font-family: Montserrat;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color:white;
  background-image: url(pic/background1.jpg);
}


.grid-container {
    display: grid;
    grid-template-columns: 0.6fr 1.9fr;
    height:150vh;
    grid-template-rows: 0.5fr 2.5fr 1.3fr 0.4fr;
    gap: 0px 0px;
    grid-template-areas:
      "logo navbar"
      "main-page main-page"
      "second-page second-page"
      "footer footer";
  }
  

  
  /* LOGO AREA*/


.logo {
    grid-area: logo;
  
  }
  
  #logo {
    padding:2rem 0 0 2rem;
  }
  
  
  
  /* NAVBAR AREA*/
  .navbar {
    grid-area: navbar;
    padding-left: 25rem;
  padding-top:2.5rem;
  }


  
   li {
    margin-right: 2.5rem;
  display: inline;
  list-style-type: none;
   }
  
   a {
    font-size: 1.2rem;
     color:white;
     text-decoration: none;
   }
  
  

/* MAIN-PAGE AREA*/

.main-page { 
    grid-area: main-page;
  
  }
  
  
  h2 {
    width:50rem;
    margin-top:15rem;
    padding-bottom: 3.5rem;
    margin-left:1.25rem;
  }
  
  
  #learn-more-button {
    border:0.063rem solid white;
    color:white;
    padding:0.938rem;
    margin-left:20rem;
    }
  
    #learn-more-button:hover{
  background-color: white;
  color:black;
  transition: 0.6s;
    }
  

    /* SECOND AREA */
  
 
    .second-page { 
        grid-area: second-page; 
    }
 
 
    /* FOOTER AREA*/

  .footer { 
  grid-area: footer;

}

我非常感谢任何形式的帮助，并提前非常感谢。

标签： htmlcssgridbackground-image

解决方案

我认为您必须在另一个 div 中进行 3 次潜水，然后向该父 div 提供背景图像并删除固定的背景附件..试试这个..

css（在您的代码中添加此样式）：

 .one {
            background: url(background1.jpg) no-repeat;
            background-size: cover;
        }

HTML：

  <div class="grid-container">
        <div class="one">
            <!-- LOGO AREA-->
            <div class="logo">

                <div class="logo">
                    <a href="Index.html"><img id="logo" src="pic/white_logo.png" alt="logo"></a>
                </div>
            </div>


            <!-- NAVBAR AREA-->

            <div class="navbar">

                <ul class="nav-list">
                    <a class="list" href="about.html">
                        <li>about</li>
                    </a>
                    <a class="list" href="">
                        <li>skills</li>
                    </a>
                    <a class="list" href="">
                        <li>contact</li>
                    </a>
                </ul>


            </div>

            <!-- MAIN PAGE AREA-->
            <div class="main-page">

                <h2>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum</h2>
                <a id="learn-more-button" href="">LEARN MORE</a>


            </div>
        </div>
        <!-- SECOND PAGE -->

        <div class="second-page"></div>
        <!-- FOOTER -->

        <div class="footer"></div>
    </div>

输出 ：

更改父子div的宽度

推荐阅读