如何在首页的两个背景之间使一个背景变得柔和？

Question

所以我在首页添加了两个背景。一个是蓝色阴影，另一个是图像。我想用那个蓝色的阴影去看更多的那个图像。我该怎么做呢。HTML：

<div class="banner banner-4 banner-4-bg">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="banner-content">
              <h1>The Easiest Way to Find Job</h1>
              <p>Find Jobs, Employment & Career Opportunities</p>
              <div class="banner-search">
                <form action="#" class="search-form">
                  <input type="text" placeholder="Enter Keywords">
                  <select class="selectpicker" id="search-location">
                    <option value="" selected>Location</option>
                    <option value="california">California</option>
                    <option value="las-vegas">Las Vegas</option>
                    <option value="new-work">New Work</option>
                    <option value="carolina">Carolina</option>
                    <option value="chicago">Chicago</option>
                    <option value="silicon-vally">Silicon Vally</option>
                    <option value="washington">Washington DC</option>
                    <option value="neveda">Neveda</option>
                  </select>
                  <button class="button primary-bg"><i class="fas fa-search"></i>Search Job</button>
                </form>
                <div class="trending-key">
                  <span>Trending Keywords:</span>
                  <a href="#">designer</a>
                  <a href="#">php</a>
                  <a href="#">ios</a>
                  <a href="#">Android</a>
                  <a href="#">Accounting</a>
                  <a href="#">Management</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

我的CSS：

.banner-4-bg {
  background: url(../images/bg/banner_home.png) , url(../images/bg/banner-4-bg.jpg) no-repeat center;
  background-size: cover;
}

.banner-4 .banner-content {
  padding: 290px 0 210px;
  text-align: center;
  color: #ffffff;
}

我现在所拥有的：

​

我想要的是：

​

​

帮帮我好的人:)

Answer 1

有不同的方法可以做到这点：

1. 修改图像并使其与第二个图像中显示的图像相同。
2. 使另一个图像与图像和{position: absolute}具有相同的宽度和高度，以便与图像重叠，然后{ background-color: 'some gray or black color', opacity: 0.5 } (相应地调整不透明度和背景色)。另外，将所有显示内容写在此div.

中的横幅上

Answer 2

您可以使用CSS opacity调整图片的透明度，其中opacity介于0.0 - 1.0之间，值越小越透明，例如：

.banner-4-bg {
  background: url(../images/bg/banner_home.png) , url(../images/bg/banner-4-bg.jpg) no-repeat center;
  background-size: cover;
  opacity: 0.5;
}

.banner-4 .banner-content {
  padding: 290px 0 210px;
  text-align: center;
  color: #ffffff;
}

Answer 3

在这里(在全屏模式下查看)：

我试着获取你分享和使用的图片，可能清晰度不是很清楚。您可能需要根据需要使用Texts域。正如我在注释中提到的，交换应该为您修复的background:urls。

当使用多个背景图像时，图像将彼此堆叠，第一个最接近视图。

​

.banner-4-bg {
  background: url(https://i.postimg.cc/DyJRcGNB/Px3iz.png), url(https://i.postimg.cc/wTL0vQZ8/azHDz.jpg) no-repeat center;
  background-size: cover;
}

.banner-4 .banner-content {
  padding: 290px 0 210px;
  text-align: center;
  color: #ffffff;
}

<div class="banner-4-bg">

</div>
<div class="banner banner-4 banner-4-bg">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="banner-content">
          <h1>The Easiest Way to Find Job</h1>
          <p>Find Jobs, Employment & Career Opportunities</p>
          <div class="banner-search">
            <form action="#" class="search-form">
              <input type="text" placeholder="Enter Keywords">
              <select class="selectpicker" id="search-location">
                <option value="" selected>Location</option>
                <option value="california">California</option>
                <option value="las-vegas">Las Vegas</option>
                <option value="new-work">New Work</option>
                <option value="carolina">Carolina</option>
                <option value="chicago">Chicago</option>
                <option value="silicon-vally">Silicon Vally</option>
                <option value="washington">Washington DC</option>
                <option value="neveda">Neveda</option>
              </select>
              <button class="button primary-bg"><i class="fas fa-search"></i>Search Job</button>
            </form>
            <div class="trending-key">
              <span>Trending Keywords:</span>
              <a href="#">designer</a>
              <a href="#">php</a>
              <a href="#">ios</a>
              <a href="#">Android</a>
              <a href="#">Accounting</a>
              <a href="#">Management</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​