Как сделать один фон мягким между двумя фонами на домашней странице?

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

Вы можете настроить прозрачность изображения, используя 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 2

Здесь вы go (просмотреть в полноэкранном режиме):

Я пытался получить изображения, которыми вы поделились, и использовал их, возможно, ясность не ясна. Возможно, вам придется использовать текстовое поле, как вы хотите. Как я уже упоминал в комментариях, поменяйте 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>

Answer 3

Есть разные способы сделать это:

1. Измените изображение и сделайте так, как показано во втором.
2. Сделайте еще один div такой же ширины и высоты, как и image и {position: absolute} таким образом, чтобы оно перекрывало изображение, затем { background-color: 'some gray or black color', opacity: 0.5 } (соответственно измените непрозрачность и цвет фона) . также, напишите весь отображаемый контент на баннере в этом div .