Частичное совмещение изображения с цветом

Question

Я пытаюсь выполнить sh этот раздел веб-страницы, и мне трудно найти хороший способ частично перекрыть желтый цвет из 1-го столбца поверх изображения 2-го столбца. Я настроил столбцы и попытался использовать отрицательные свойства, но это не сработало. Я попытался добавить это к изображению в Фотошопе, но это было БОЛЬШОЙ неудачей. Я, очевидно, не могу сделать границу с непрозрачностью.

Я что-то упустил? Я просто не могу придумать хороший способ сделать это. Любая помощь приветствуется.

Answer 1

Я бы подошел к этому, используя абсолютно позиционированный псевдоконтент внутри относительно позиционированного родителя. В следующем примере, конечно, не хватает многих деталей (медиазапросы, лучший интервал, обработка шрифтов и т. Д. c.), Но это один из способов достижения sh того, что вы пытаетесь сделать.

.container {
  display: flex;
}

.leaf {
  background-color: yellow;
  flex: 1;
  position: relative;
  margin: 2.5em 0;
}

.leaf-content {
  padding: 1em 3em 1em 1em;
}

.leaf::after {
  content: '';
  background-color: yellow;
  right: -150px;
  top: 0;
  bottom: 0;
  width: 150px;
  opacity: .35;
  position: absolute;
}

.container img {
  width: 500px;
  height: auto;
}

body {
  font-family: sans-serif;
}

<div class="container">
  <div class="leaf">
    <div class="leaf-content">
      <h1>BIKE</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed est, ipsa minus repellendus, rerum officia eaque, quia pariatur voluptatibus asperiores inventore illum laudantium soluta itaque sit nobis officiis deserunt vero!</p>
    </div>

  </div>
  <div class="img-container">
    <img src="https://images.unsplash.com/photo-1517054612019-1bf855127c43?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4814eb541ddb4ef86140974f1bee831&fit=crop&w=1000&h=1000&q=80" alt="">
  </div>
</div>

jsFiddle