我试着把这个简单的页面，左边是文本，右边是图像，然后添加一个媒体查询，这样图像就可以淡入背景，文本后面的图像就变得很亮了。我试着添加线性渐变，但似乎没有效果。我设置图像显示没有在第一次以为我会只是添加它作为一个背景图像后，因为css从上到下移动，但这只是把我的屏幕背景变成白色。然后我添加了这个线性渐变，它根本不起作用，虽然它在开发工具中显示，没有被划掉或任何东西。
我试着设置home-img不显示，然后在正文或节中添加背景图像。
正如你在第一张图片中看到的，它看起来很好。第二张图片是我在代码方面遇到麻烦的地方。我希望背景非常亮，这样你就可以阅读文本。附件是我的代码片段。
我尝试在媒体查询中编辑home-img。https://github.com/aloha-suzanne/propelagency
第一节第一节第一节第一节第一次
超文本：

<section class="home">
      <img
        src="images/home-img.jpg"
        class="home-img"
        alt="man in striped shirt sitting on a bean bag chair while typing on his laptop"
      />
      <div class="home-content">
        <h1>Everything you need to succeed online.</h1>
        <p>
          We use strategic creativity to distinguish our clients from
          competitors, let their message stand out, connect and resonate with
          the audience.
        </p>
        <a href="contact.html" class="btn">Get started</a>
      </div>
    </section>

CSS：

section {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  padding: 100px;
  margin-top: 60px;
}

section.home {
  flex-direction: row;
  margin-top: 0;
}

.home-img {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 110%;
}

@media (max-width: 995px) {
  .logo {
    top: 10px;
    left: 40px;
    font-size: 1.5rem;
  }

  section {
    padding: 100px 40px;
  }

  .navigation ul li a {
    font-size: 2rem;
  }

  section {
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.561),
        rgba(255, 255, 255, 0.561)
      ),
      url(images/home-img.jpg);
    background-size: cover;
  }
}

@media (max-width: 680px) {
  h1 {
    font-size: 1.5rem;
    margin-top: 150px;
  }

  .home-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

我尝试将主页图像设置为显示：然后将其作为具有线性渐变的背景图像再次添加。也就是说，使背景显示为灰色，但不应用图像。