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

Question

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

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

header里面的menu因为有背景图看不清楚，所以我决定用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>

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

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

An element that has blending applied, must blend with all the underlying content of the stacking context that that element belongs to. ^ref

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

CSS mix-blend-mode not working if the background image is placed in another tag

html

css

mix-blend-mode