Исправление артефакта картинки градиентным фоном

Question

Есть карточки, в одной из них левом нижнем углу у картинки есть артефакт-белый треугольник, пытаюсь его скрыть подложив под картинку фон-градиент похожего цвета, но этот фон подложки заполняет всю карточку, хоть я и указал размеры для градиента. Что не так, как правильно задать размеры градиенту, чтобы он был точно под картинкой?

.courses-list__article {
  position: relative;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 211px 30px 30px 30px;
  border-radius: 20px;
  height: 100%;
  background-color: #EDF0F9;
  background-repeat: no-repeat;
}

.green-picture {
  background: url("https://b.radikal.ru/b14/2108/d4/49276d0d787e.png") no-repeat, linear-gradient(#6DA71D, #6DA71D) left top/40px 40px;
}

<li class="col-lg-6 col-sm-6 col-md-6 courses-list-item ">
  <article class="courses-list__article flex green-picture">
    <h3 class="article-subheading courses__subheading">Lorem ipsum dolor</h3>
    <p class="article-text article-text_margin courses__article-text">
       Sit amet consectetur adipisicing elit. Autem voluptas eaque excepturi aut nemo unde ullam porro officia minima explicabo optio debitis corporis suscipit voluptatem, quisquam possimus, incidunt corrupti. Dolorum..
    </p>
    <button class="btn-reset btn courses-list__btn">Подробнее</button>
  </article>
</li>

Answer 1

Для фона старайтесь выбирать что-то одно: либо общее свойство background, либо по его составляющим (-color, -repeat и др.). Иначе, легко что-то забыть или упустить.

В вашем коде были следующие ошибки:

Не было указано значение no-repeat для градиента;
Не было указано смещение для градиента;
Общим свойством background в .green-picture перезаписывались background-color: #EDF0F9 и background-repeat: no-repeat из .courses-list__article.

Цвет градиента изменён для наглядности.

.courses-list__article {
  position: relative;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 211px 30px 30px 30px;
  border-radius: 20px;
  height: 100%;
  background-color: #EDF0F9;
  background-repeat: no-repeat;
}

.green-picture {
  background: url(https://b.radikal.ru/b14/2108/d4/49276d0d787e.png) no-repeat, linear-gradient(#f00, #f00) left top 110px/25px 70px no-repeat, #EDF0F9;
}

<li class="col-lg-6 col-sm-6 col-md-6 courses-list-item ">
  <article class="courses-list__article flex green-picture">
    <h3 class="article-subheading courses__subheading">Lorem ipsum dolor</h3>
    <p class="article-text article-text_margin courses__article-text">
       Sit amet consectetur adipisicing elit. Autem voluptas eaque excepturi aut nemo unde ullam porro officia minima explicabo optio debitis corporis suscipit voluptatem, quisquam possimus, incidunt corrupti. Dolorum..
    </p>
    <button class="btn-reset btn courses-list__btn">Подробнее</button>
  </article>
</li>

БЛОГ НА HUSL

Исправление артефакта картинки градиентным фоном

Ответы (1 шт):