Mix-blend-mode not working?! (HELP)

HTML-CSS
1

Hi,

I eventually want my header text to be negative of the background.

At the moment I have it when ever you click on the text it changes the background color.

Now when I try to apply mix-blend-mode to the style, it doesn’t work.

I have attached a screenshot of what I want and below of what I currently have.

53%20PM
53%20PM2102×1276 849 KB
.

Help?!

Thanks!

<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
            function myFun(){
            var randcol= "";
            var allchar="0123456789ABCDEF";
            for(var i=0; i<6; i++){
               randcol += allchar[Math.floor(Math.random()*16)];


            }

             document.body.style.backgroundColor= "#"+randcol;

            }
    </script>

<title></title>

<style type="text/css">
@charset "UTF-8";
@supports (mix-blend-mode: difference);
  
body {
	font-family: Helvetica;
	background-color:#ae2902;
	color:#f9f9f4;
    mix-blend-mode: difference;

	padding: 0;
	margin: 0;
	text-align: center;
	font-size:2em;
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translatex(-50%) translatey(-50%);
	
}
</style>
</head>
<body>
<div class="body">
<h1 onclick="javascript:myFun()">covey.moda</h1>
</div>

</body>
</html>
2

I’m a bit confused about what you are trying to apply to what. For the CSS you posted, did you mean to apply it to the div with a class of .body or the body element? Your selector is for the body element not the div.

It would help to see the code live but as you are using Svelte you would have to use something like stackblitz, or you would need to build it and post a live version of the public folder.

1 Like
3

Here it is live: covey.moda

In the screenshot the logo “NOVEMBRE” at the top left corner is negative of what ever is behind it.

In the live code (https://covey.moda) I would like to apply that same style to the logo in the middle “covey.moda”

At moment I would like the style to only be applied to the logo that will eventually be in the header at the top left corner of the page.

Also attached is another screenshot of what I’m using which is going directly into Tumblr.

54%20PM
54%20PM2110×1308 305 KB

4

Not 100% sure but I think there might be some stacking context issue. Try giving the h1 a container div and set the background color on it instead. You also need to apply mix-blend-mode to the text and not the background (if I understand what you want correctly).

Here is a super simple example, where the text is green from blending the yellow and red.

Some links



1 Like
5

It’s still not working (PLEASE HELP), do you think its because I’m using Tumblr?

06%20PM
All I need to do at the moment is to apply this to the page’s logo.

7 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
            function myFun(){
            var randcol= "";
            var allchar="0123456789ABCDEF";
            for(var i=0; i<6; i++){
               randcol += allchar[Math.floor(Math.random()*16)];


            }

             document.body.style.backgroundColor= "#"+randcol;

            }
    </script>


<title></title>




<style type="text/css">
@charset "UTF-8";

body {
	font-family: Helvetica;
	background-color:#ae2902;
	color:#f9f9f4;
    mix-blend-mode: difference;

	padding: 0;
	margin: 0;
	text-align: center;
	font-size:2em;
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translatex(-50%) translatey(-50%);
	
}
</style>
</head>
<body>
<h1 onclick="javascript:myFun()">covey.moda</h1>


</body>
</html>
9

Yes sir, well I tried it but nothing yet.

<style type="text/css">
.help {
  mix-blend-mode: difference; 

}
</style>

<!-- 
I must be missing something :/ 
-->

<div class="help">
<h1 onclick="javascript:myFun()">covey.moda</h1>
</div>
10

You are still applying mix-blend-mode to the background, you want it on the text. The text is in front of the background and you blend it with the background.

I thought the image you posted was of your site, that is why I was talking about Svelte. As far as I can tell, it is blending the text with a background image. How well that works depends on the color of the text and the color of the image.

1 Like
11

When I click the logo it changes the background to a random color (I want that)

The next step we need is when I click the logo its negative to the random color it generates.

I may have some progress here?

04%20PM
04%20PM762×298 96.4 KB

.landing {
  
  background: url(https://images.unsplash.com/photo-1576169198980-2c11f9bef39a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80) center/cover no-repeat;
}

.logo {
   mix-blend-mode: difference;
}

<div class="landing">
<h1 onclick="javascript:myFun()" class="logo">covey.moda</h1>
</div>
12

If the text is on top of an image how can it be a negative of the background color? It doesn’t sit on top on the background color so it can’t blend with it.

1 Like
13

Is it too much to apply the random color generator to the body background when the logo is clicked so it would work that way?

14

Sorry I don’t understand the question. What do you mean by “too much”?

1 Like
15

Well I feel stuck at the moment.

I would like the logo to be negative (on the right track at the moment) of what ever is behind it.

Another function is when you click it, it changes the background into a random color so the logo would automatically be negative of this background.

I wonder what the next step would be now?

16

Are you saying when you click the logo it changes the background from an image to a solid color?

Because the text is not on the background color, it’s on the image. It can not both blend with the image and a background color. The image can blend with a background color using background-blend-mode and you can then also blend the text using mix-blend-mode.

Here are two examples.

I’m also not exactly sure what your definition of negative is. Here is the definition of the difference blend mode from Photoshop.

Blending modes: Difference

Looks at the color information in each channel and subtracts either the blend color from the base color or the base color from the blend color, depending on which has the greater brightness value. Blending with white inverts the base color values; blending with black produces no change.

There is an invert filter as well filter: invert(1).

1 Like