mix-blend-mode

Giganews Newsgroups
Subject: mix-blend-mode
Posted by:  Andrew Poulos (ap_pr…@hotmail.com)
Date: Tue, 11 Jun 2019

When I build a small test with this CSS

..bg {
  background:white;
  position:absolute;
  left:0; top:0; width:100%; height:100%;
}

..btn {
  position:absolute;
  background:blue;
  left:100px; top:100px; width:100px; height:100px;
  box-shadow:2px 2px 5px 0px rgba(161,161,161,0.6);
}
..btn::after {
  content:'';
  position:absolute;
  left:-1px; top:-1px; width:100%; height:100%;
  border:1px solid white;
  mix-blend-mode: difference;
}

on this HTML

<div class="bg"></div>
<div class="btn"></div>

the colour of the border appears "inverted" (as I need and expect) but
when I copy the CSS into the site I'm working on, the colour is always
white irrespective of the colour of the background.

I'm at a loss - any ideas on why the colour doesn't change?

Andrew Poulos

Replies