CODEWITHSUNDEEP
htmlcssmix-blend-mode
Debsmita Paul
Debsmita Paul

Reputation: 1460

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

I have this simple page layout with a header and a banner.

I want to make the header transparent and sit on top of the banner image (which I might convert into a slider later, here for simplicity I have used single image).

The menu which is inside header is not clearly visible because of the background image, so I decided to use mix-blend-mode: difference, as I should.

But the text is not changing color.

As you can see in the below code snippet, I have applied mix-blend-mode to the <a>. This only works if I give li a background color.

I think the problem is that the image element is in a different tag that the mix-blend-mode element. I cannot figure out where the problem is. Any help would be appreciated.

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

Upvotes: 1

Views: 5269

Answers (1)

Temani Afif
Temani Afif

Reputation: 272955

.header is creating a stacking context since it has z-index defined

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

Or move the mix-blend-mode to header (but this will affect the logo too):

.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

Upvotes: 4

Related Questions