WP Demo

作成日 :

1-14.ブレンドモード – mix-blend-mode

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