CSS background

bg.css

/*-----------------
 * 色に関しては2つだけ
 *   - color
 *   - clip
 * 残りは画像に適用
 -----------------*/

.bg {
  width: 200px;
  height: 200px;
  padding: 20px;

  background-color: blue;
  background-image: linear-gradient(90deg, orange 40%, white, green);
  /* background-blend-mode: exclusion; */

  background-size: 50% 150px; /*[auto auto]*/ /*cover, contain*/
  background-position: right bottom; /*[0% 0%]*/ /* 10px 30px */

  background-origin: content-box; /*[padding-box]*/
  background-clip: padding-box;

  background-repeat: no-repeat; /*[repeat]*/
  background-attachment: local; /*[scroll]*/
}