Change text color black to white on overlap of bg

how to dynamically change text color based on a background color css
reverse text color based on background color
reverse text color based on background color automatically in css
change text color based on background image
mix-blend-mode not working
css contrast text against background
reverse text color based on background color photoshop
automatic text color change in html

I have a div that is positioned absolute with a background color gradient. I have this text on it that I want to change to the color white as I scroll the text up.

I'm using the 'mix-blend-mode' property to achieve this currently but I can't find any setting that will turn the text from black to white. Has anyone done this before or can think of a trick I can do?

.bg-container {
  position: fixed;
  top: -30px;
  left: 0;
  width: 100px;
  height: 100px;
}

.gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
  transform: skewY(-15deg);
}

.scroll-content {
  position: absolute;
  top: 50px;
}

.scroll-content p {
  color: #000;
  mix-blend-mode: overlay;
}

/*hack for iOS*/
.scroll-content p:after{
    content: '\200c'
}
<div class="bg-container">
  <div class="gradient-background">
    &nbsp;
  </div>
</div>
<div class="scroll-content">
  <p> abc 1 </p>
  <p> abc 2 </p>
  <p> abc 3 </p>
  <p> abc 4 </p>
  <p> abc 5 </p>
  <p> abc 6 </p>
  <p> abc 7 </p>
  <p> abc 8 </p>
  <p> abc 9 </p>
  <p> abc 10 </p>
  <p> abc 11 </p>
  <p> abc 12 </p>
  <p> abc 13 </p>
  <p> abc 14 </p>
  <p> abc 15 </p>
  <p> abc 16 </p>
  <p> abc 17 </p>
  <p> abc 18 </p>
  <p> abc 19 </p>
</div>

You can use gradient to color the text. The trick is to have this gradient similar to your shape (same degree and coloration change at the edge of the shape). Since your skewed element is fixed, you need to make the gradient to also be fixed to create the magic effect of text scrolling:

.gradient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
  transform: skewY(-15deg);
  transform-origin:left;
}

.scroll-content {
  position: absolute;
  top: 50px;
  /* 165deg = 180deg - 15deg   */
  background: linear-gradient(165deg, #fff 195px,#000 195px) fixed;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
<div class="gradient-background">
</div>
<div class="scroll-content">
  <p> abc 1 </p>
  <p> abc 2 </p>
  <p> abc 3 </p>
  <p> abc 4 </p>
  <p> abc 5 </p>
  <p> abc 6 </p>
  <p> abc 7 </p>
  <p> abc 8 </p>
  <p> abc 9 </p>
  <p> abc 10 </p>
  <p> abc 11 </p>
  <p> abc 12 </p>
  <p> abc 13 </p>
  <p> abc 14 </p>
  <p> abc 15 </p>
  <p> abc 16 </p>
  <p> abc 17 </p>
  <p> abc 18 </p>
  <p> abc 19 </p>
</div>

Reverse Text Color Based on Background Color Automatically in , But that text was the same color as the background of the bar that was filling but instead, the text color reversed to be white instead anywhere it With the loading animation we'll be changing the width of the element, like so: Ironically, it works just fine in Firefox but in Chrome 46 I just see a black void in� First of all, the text is duplicated. We have black text below as the actual text content of the element and the white text above as the value of the content property (taken from a data attribute which gets updated via JS). These two are stacked one on top of each other (they completely overlap).

You could do this with some javascript:

$(document).ready(function() {
  $(window).scroll(function() {
    var bgHeight = $('.bg-container').height();
    var scroll = $(window).scrollTop();
    $('.scroll-content p').each((i, el) => {
      var pPos = $(el).offset().top;
      var pHeight = $(el).height();

      if (pPos < (scroll - pHeight + bgHeight)) {
        $(el).removeClass('black');
        $(el).addClass('white');
      } else {
        $(el).addClass('black');
        $(el).removeClass('white');
      }
    });
  })
})
.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-image: linear-gradient(to bottom, rgb(1, 55, 124) 15%, rgb(81, 155, 244));
}

.scroll-content {
  position: relative;
  z-index: 99999;
  font-family: neuzeit-grotesk, sans-serif;
  font-weight: 700;
}

.white {
  color: #fff;
}

.black {
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-container">
  <div class="gradient-background">
    &nbsp;
  </div>
</div>
<br/><br/><br/><br/><br/><br/>
<div class="scroll-content menu_black">
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
</div>

Methods for Contrasting Text Against Backgrounds, However, this means we need to change the clipping path if we change header { background: url(black-and-white-image.jpg) } h2 { color: white; image gives us a result that's the image inverted where the text overlaps it. The documents are in principle still black on white background (unless you make any color changes to the document itself – see on this next paragraph). When such documents are shared/sent with/to other people, they see the colors as defined by their Theme (mostly black text and white background – i.e. one of Windows Default themes).

You can measure with JavaScript and apply styles to tags that fall inside the range you want, but you can also do something very simple to make the text readable (this falls under "some other trick I can do"):

.scroll-content {
  text-shadow: 0 0 3px white;
}

This will only show up when it’s over the blue background, and disappear over the white background. This does depend on the effect you want to achieve, though.

Even with a JavaScript implementation, you might consider this for progressive enhancement (for JS-less users).

Change text color black to white on overlap of bg, 问题: I have a div that is positioned absolute with a background color gradient. I have this text on it that I want to change to the color white as I� Left: The REI website places a semiopaque black box behind text that overlays an image, but the contrast is still too low to support readability for the white text over light-background photos. Right: The main headline appearing over clouds fails to pass even the 3:1 contrast-ratio threshold for big text.

Solved: Text Colour opposite of background, Solved: I have a black and white checkered background in indesign, Fill & Text; Select 'Text' under Effects panel, change the blend mode� Change Fonts, Background Color, or Margins. You can change the font size, line spacing, margins, background color, or font type of the page display for a Kindle book on your Kindle Fire. Help for Kindle Fire (2nd Generation), Kindle Fire HD 7" (2nd Generation), and Kindle Fire HD 8.9" (2nd Generation).

Split Text Color from Black to White in the Middle of a Frame , Split Text Color from Black to White in the Middle of a Frame The best way I know of to reverse the color of text over a background image (or colored Change the color of the text nested inside that frame. 2) Position your text frame so that some of the text is overlapping the image. set the blending mode� how to change windows (windows 10 ) background from black to white .I tried it through Media player but no dice. This thread is locked. You can follow the question or vote as helpful, but you cannot reply to this thread.

Applying color to HTML elements using CSS, With CSS, there are lots of ways to add color to your HTML elements to create just the color of the text, its background, and any decorations on the text. space set aside for it in the document (so it may overlap other content). blue , or orange ), shades of gray (from black to white , including colors like� div { position:absolute; height:200px } /* A white bottom layer */ #whitebg { background: white; width:400px; z-index:1 } /* A black layer on top of the white bottom layer */ #blackbg { background: black; width:100px; z-index:2 } /* Some white text on top with blend-mode set to 'difference' */ span { position:absolute; font-family: Arial, Helvetica; font-size: 100px; mix-blend-mode: difference

Comments
  • you should be able to transform solid color to gradient (like this one for example : stackoverflow.com/a/53232693/8620333) .. in case you face issues, tell me
  • Hey Temani, Yes I could do that if that was the affect I wanted to achieve but it isn't. I want the text to be black (#000 solid) when it is over the white background and white (#FFF solid) when it is over the gradient/image. My content is scroll able too so any solution that just assumes an absolute position won't work.
  • Ahh when you said color the text gradient in the comment I thought you meant like the gradient of my background and then use the invert mix blend mode property which would get the white but make the black text my gradient color. This is a great solution! thank you! Now that you say it sounds so obvious
  • @playingwithnumbers yes exactly ;) but I admit it's not trivial especially that there is the fixed feature also so I reopened and added an answer
  • You're a life saver. This was driving me crazy! I was almost going to just change the style of the page at this point
  • @playingwithnumbers by the way pay attention to the suport: developer.mozilla.org/en-US/docs/Web/CSS/… .. I will probably add another way later ;)
  • WOW, great idea my friend
  • Sorry, I re-did my example to match my picture. The boundary isn't horizontal its actually diagonal so the text becomes two-toned at the boundary. If it was horizontal this would definitely work
  • can you please explain what this code does? (pPos < (scroll - pHeight + bgHeight))
  • @BearNithi The <p/> position is less than (current scroll in px - <p/> height + the gradient height)
  • The text won't change to white though, which is what the OP asks for. It'll only become visible under the gradient.
  • Right, which is I why I note it’s just under the broad category of a related trick—if he is worried primarily about readability, etc.
  • Added a JS implementation, but flying blind on mobile. Will test ASAP.
  • Don't have time to test JS, and it's barely more than pseudocode, so deleting that part--but it's in the edit history if anyone wants to try it out or use it as a starter.
  • Appreciate the idea, but not the affect I want to achieve. I wouldn't mind a JS solution but I dont think one will exist. I think the solution will be some kind of series of filters and mix-background-modes. Maybe I'll have to duplicate the text content and overlay it. Maybe i have to apply the isolation: isolate property to some divs. Still haven't figured it out :(