如果背景图像放在另一个标签中，CSS mix-blend-mode 不起作用

Question

我有一个带有header 和banner 的简单页面布局。

我想让header 透明并位于banner 图像的顶部（稍后我可能会将其转换为滑块，为简单起见，我使用了单个图像）。

header 里面的menu 因为背景图片的原因看不清楚，所以我决定使用mix-blend-mode: difference，我应该这样做。

但是文本没有改变颜色。

正如您在下面的代码 sn-p 中看到的，我已将 mix-blend-mode 应用于 <a>。 这只有在我给 li 一个背景颜色时才有效。

我认为问题在于图像元素与mix-blend-mode 元素位于不同的标签中。我无法弄清楚问题出在哪里。任何帮助将不胜感激。

.header {
  position: absolute;
  width: 100%;
  top: 50px;
  left: 0;
  z-index: 9;
}

.header .header__bottom ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
  position: relative;
}

.header .header__bottom ul li {
  display: inline-block;
}

.header .header__bottom ul li a {
  text-decoration: none;
  display: block;
  padding: 0 20px;
  color: #fff;
  mix-blend-mode: difference;
}

.banner img {
  width: 100%;
}

<section class="header">
  <div class="header__bottom">
    <div class="logo">
      <img src="https://www.imltravel.com/wp-content/uploads/2017/03/IML-LOGO-VECTOR-WEBSITE-SMALL-e1489572911433.png">
    </div>
    <div class="header__menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tour Packages</a></li>
        <li><a href="#">Visa</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</section>

<section class="banner">
  <img src="https://images.unsplash.com/photo-1503220317375-aaad61436b1b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHw%3D&w=1000&q=80">
</section>

Answer 1

.header 正在创建一个堆栈上下文，因为它定义了 z-index

要么删除 z-index：

.header {
  position: absolute;
  width: 100%;
  top: 50px;
  left: 0;
}

.header .header__bottom ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
  position: relative;
}

.header .header__bottom ul li {
  display: inline-block;
}

.header .header__bottom ul li a {
  text-decoration: none;
  display: block;
  padding: 0 20px;
  color: #fff;
  mix-blend-mode: difference;
}

.banner img {
  width: 100%;
}

body {
 margin:0
}

<section class="header">
  <div class="logo">
      <img src="https://www.imltravel.com/wp-content/uploads/2017/03/IML-LOGO-VECTOR-WEBSITE-SMALL-e1489572911433.png">
    </div>
  <div class="header__bottom">
    <div class="header__menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tour Packages</a></li>
        <li><a href="#">Visa</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</section>

<section class="banner">
  <img src="https://images.unsplash.com/photo-1503220317375-aaad61436b1b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHw%3D&w=1000&q=80">
</section>

或者将 mix-blend-mode 移到页眉（但这也会影响 logo）：

.header {
  position: absolute;
  width: 100%;
  top: 50px;
  left: 0;
  z-index:9;
  mix-blend-mode: difference;
}

.header .header__bottom ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
  position: relative;
}

.header .header__bottom ul li {
  display: inline-block;
}

.header .header__bottom ul li a {
  text-decoration: none;
  display: block;
  padding: 0 20px;
  color: #fff;
}

.banner img {
  width: 100%;
}

<section class="header">
  <div class="logo">
      <img src="https://www.imltravel.com/wp-content/uploads/2017/03/IML-LOGO-VECTOR-WEBSITE-SMALL-e1489572911433.png">
    </div>
  <div class="header__bottom">
    <div class="header__menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tour Packages</a></li>
        <li><a href="#">Visa</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</section>

<section class="banner">
  <img src="https://images.unsplash.com/photo-1503220317375-aaad61436b1b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHw%3D&w=1000&q=80">
</section>

应用了混合的元素必须与该元素所属的堆叠上下文的所有底层内容混合。 ^ref