混合混合模式差异

Question

我尝试添加 mix-blend-mode: difference;到“跨度”，但它不起作用。

这个解决方案有效：我将混合模式而不是“.caption span”添加到“.caption”。但我真正需要的是将 span 放入 div.

知道为什么吗？谢谢！

.caption {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 99;
  font-size: 62px;
}

.caption span {
  color: #fff;
  mix-blend-mode: difference;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.background-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

<div class="row">

  <div class="row-inner">

    <div class="caption">
        <span class="test">Headline</span>
    </div>

  </div>

  <div class="background-image">
    <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg">
  </div>


</div>

Answer 1

据我所知，使用 mix-blend-mode 的唯一方法是将 <span> 和 <img> 放在同一个 <div>

你的工作样本。

span {
  color: #fff;
  mix-blend-mode: difference;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 99;
  font-size: 62px;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.background-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

<div class="row">
  <div class="background-image">
    <span class="test">Headline</span>
    <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg">
  </div>


</div>

另一种方法是将 wrapper div 的 background 设置为图像，它将起作用。

希望对您有所帮助。

您可以与 mix-blend-mode 一起使用的值按照此 link

/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

混合混合模式差异

Mix-Blend-Mode Difference

css

mix-blend-mode