Как сделать 2 цвета фона на одном изображении

Question

 <div class="row bg-white">
      <div class="col-lg-6">
      </div>
      <div class="col-lg-6">
      </div>
    </div>
    <div class="row bg-blue">
      <div class="col-lg-6">
          <div class="screenshot_water"></div>
      </div>
      <div class="col-lg-6">some text </div>
    </div>

У меня есть 2 раздела в верхней части моего сайта:

1. белый фон
2. синий фон

Я хочу, чтобы на изображении было 10% с белым фоном, а остальное синим.

Учитывая, что у меня есть ряд вопросов, как я могу это сделать?

Answer 1

Вы можете применить свойство непрозрачности CSS к изображению.

.opaque {
  /* Theoretically for IE 8 & 9 (more valid) */
  /* ...but not required as filter works too */
  /* should come BEFORE filter */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8

  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=50); // IE 5-7

  /* Modern Browsers */
  opacity: 0.5;
}

Вы можете прочитать больше о непрозрачности по адресу: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

Answer 2

Добавьте общий в одном главном div

<div class="row bg-white-blue">
  <div class="col-lg-6"> </div>
  <div class="col-lg-6"> </div>
  <div class="col-lg-6">
    <div class="screenshot_water"></div>
  </div>
  <div class="col-lg-6">some text </div>
</div>

А затем добавьте CSS в этот основной класс div. Например

.bg-white-blue {
  background: linear-gradient(black 10%, blue 50%);
}