I would like to set the blending mode of the mixture of anchors inside the position:fixedelement, but it does not apply.
If I apply the blending blending mode to the parent element, it works, or if I set the parent element to position:absoluteit also works, but I don’t want to achieve either.
Codepen with three examples, I would like #nav to look like # nav2 and # nav3 with existing html.
http://codepen.io/wesdeboer/pen/QjawYv
HTML
<body>
<div id="nav">
<a href="">fixed</a>
</div>
<div id="nav2">
<a href="">absolute</a>
</div>
<div id="nav3">
<a href="">parent</a>
</div>
</body>
CSS
body { background: url(http://lorempixel.com/400/200)}
#nav {
position: fixed;
top:0;
left: 0;
}
#nav2 {
position: absolute;
top:0;
left: 100px;
}
#nav3 {
position: fixed;
top: 0;
left: 250px;
mix-blend-mode: difference;
}
a {
color: white;
font-weight: bold;
font-size: 32px;
mix-blend-mode: difference;
}
Checked in Chrome 45
source
share