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;
}

Help improve MDN

This page was last modified on ⁨2025年11月9日⁩ by MDN contributors.