0

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

此解决方案有效：我将混合模式添加为“.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>

4

1 回答 1

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>

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

我希望这对你有帮助。

您可以使用的值mix-blend-mode根据此链接

/* 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;
于 2017-11-23T10:52:19.357 回答