
HOME OFFICE
素材
HOME OFFICE

背景
HOME OFFICE

mix-blend-mode: normal
HOME OFFICE

multiply
HOME OFFICE

screen
HOME OFFICE

overlay
HOME OFFICE

darken
HOME OFFICE

lighten
HOME OFFICE

core-dodge
HOME OFFICE

color-burn
HOME OFFICE

hard-light
HOME OFFICE

soft-light
HOME OFFICE

difference
HOME OFFICE

exclusion
HOME OFFICE

hue
HOME OFFICE

saturation
HOME OFFICE

color
HOME OFFICE

luminosity
HOME OFFICE

plus-darker
HOME OFFICE

plus-lighter
<div class="sample-grid">
<div>
<div>
<div>HOME OFFICE</div>
<figure>
<img src="/wp-content/uploads/2026/03/grad.png" alt="" class="normal" title="normal"/>
</figure>
</div>
<p>normal</p>
</div>
… 繰り返し …
</div>
.sample-grid {
display: grid;
justify-items: center; /* 子要素を横方向の中央に寄せ、コンテンツ幅に合わせる */
/* 合成部 テキスト部 */
> div {
width: 200px;
height: auto;
outline: solid 1px #ddd;
/* 合成部 重なり指定コンテナ部 */
> div {
display: grid;
/* 素材 HOME OFFICE部 */
> div {
display: grid;
place-items: center;
width: 200px;
height: 120px;
background-image: url(/wp-content/themes/wp-test/assets/images/png/home.jpg);
background-size: cover;
color: white;
font-size: 18px;
font-weight: bold;
text-shadow: 0 0 10px black;
text-align: center;
}
/* 重なり指定部 */
> *:not(p) {
grid-area: 1 / 1; /* 中央整列、親要素いっぱい引き伸ばし(stretch) */
}
/* 画像合成指定部 */
> figure.normal img { mix-blend-mode: normal; }
> figure.multiply img { mix-blend-mode: multiply; }
> figure.screen img { mix-blend-mode: screen; }
> figure.overlay img { mix-blend-mode: overlay; }
> figure.darken img { mix-blend-mode: darken; }
> figure.lighten img { mix-blend-mode: lighten; }
> figure.color-dodge img { mix-blend-mode: color-dodge; }
> figure.color-burn img { mix-blend-mode: color-burn; }
> figure.hard-light img { mix-blend-mode: hard-light; }
> figure.soft-light img { mix-blend-mode: soft-light; }
> figure.difference img { mix-blend-mode: difference; }
> figure.exclusion img { mix-blend-mode: exclusion; }
> figure.hue img { mix-blend-mode: hue; }
> figure.saturation img { mix-blend-mode: saturation; }
> figure.color img { mix-blend-mode: color; }
> figure.luminosity img { mix-blend-mode: luminosity; }
> figure.plus-darker img { mix-blend-mode: plus-darker; }
> figure.plus-lighter img { mix-blend-mode: plus-lighter; }
}
/* モード表示部 */
> p {
width: 100%;
border-top: solid 1px #ddd;
}
}
}