メニュー

【CSS】疑似要素を使った要素にtransformをかけると、疑似要素の方だけmix-blend-modeが効かなくなる

  • 投稿日
  • 更新日
  • 著者 ひがし
  • カテゴリー CSS

サンプルコード

サンプルコードのPC表示の最大幅は600px、コンテンツ幅は500pxとする。

ここにテキストが入ります。

ここにテキストが入ります。

【CSS】

.sample {
  position: relative;
  max-width: 600px;
  margin-inline: auto;
}

.sample.type-el [data-sample="content"] {
    mix-blend-mode: multiply;
}

.sample.type-elBefore [data-sample="content"]::before {
    mix-blend-mode: multiply;
}


[data-sample="content"] {
  position: absolute;
  top: -20px;
  left: 50%;

  /* 以下を入れると疑似要素のmix-blend-modeが無効になる */
  transform: translateX(-50%);

  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  width: 300px;
  margin-left: 200px;
}

[data-sample="content"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

[data-sample="content"] p {
  position: relative;
  color: #fff;
}

[data-sample="back"] {
  background-color: blue;
  width: 100%;
  height: 100px;
}

改修コード

解決策はtransformを使わないこと。

ここにテキストが入ります。

【CSS】

.result {
  position: relative;
  max-width: 600px;
  margin-inline: auto;
}

.result [data-result="content"]::before {
    mix-blend-mode: multiply;
}


[data-result="content"] {
  position: absolute;
  top: -20px;
  /* left: 50%; */
  /* ▼追加 */
  left: calc( 50% + (( 300px - 200px ) / 2 ) );

  /* 以下を入れると疑似要素のmix-blend-modeが無効になる */
  /* transform: translateX(-50%); */

  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  width: 300px;
  /* margin-left: 200px; */
}

[data-result="content"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

[data-result="content"] p {
  position: relative;
  color: #fff;
}

[data-result="back"] {
  background-color: blue;
  width: 100%;
  height: 100px;
}
mix-blend-mode