Question

我尝试添加mix-blend-mode：差异; “跨越”，但它不起作用。

此解决方案有效：我将混合模式添加为“.caption span”到“.caption”。但我真正需要的是将跨度放在div中。

任何想法为什么？谢谢！

＆＃13;

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

＆＃13;

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

＆＃13;

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>

另一种方法是将包装器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;

混合混合模式差异

1 个答案: