CSS 合成と混合

<section>
  <div><span>通常、混合なし</span></div>
  <div><span>色を乗算</span></div>
  <div><span>背景色に基づいて乗算</span></div>
  <div>通常、混合なし</div>
  <div>色を乗算</div>
  <div>背景色に基づいて乗算</div>
</section>

/* 2 つのオフセット縞模様の背景画像と背景色を持つ div を作成します。 */
div {
  width: 200px;
  height: 200px;
  background-image:
    repeating-linear-gradient(45deg, red 0 15px, pink 15px 30px),
    repeating-linear-gradient(-45deg, blue 0 15px, lightblue 15px 30px);
  background-size: 150px 150px;
  background-repeat: no-repeat;
  background-position:
    top left,
    bottom right;
  background-color: palegoldenrod;
  text-align: center;
  padding-top: 150px;
  font-family: sans-serif;
  box-sizing: border-box;
  border: 5px solid black;
}
div:nth-of-type(3n + 1) {
  background-blend-mode: normal;
}
div:nth-of-type(3n + 2) {
  background-blend-mode: multiply;
}
div:nth-of-type(3n + 3) {
  background-blend-mode: overlay;
}
div:nth-of-type(n + 4) {
  mix-blend-mode: difference;
}
/* 要素全体に応じて、透明の丸い穴のあるピンクの背景を配置し、
  例を 2 行 3 列に並べる */
section {
  padding: 0.75em;
  background: radial-gradient(
    circle,
    transparent 0 20px,
    rgb(255 200 200) 20px
  );
  background-size: 60px 60px;
  background-position: center;
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}
/* テキストの一部を読みやすくする */
span {
  background-color: #ffffff99;
}