如果背景图像放置在另一个标签中，CSS 混合模式不起作用

问题描述

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

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

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

但是文本没有改变颜色。

正如您在下面的代码段中看到的，我已将 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>

解决方法

.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 移动到标题（但这也会影响徽标）：

.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