Adjust the color of the text depending on the background it is displayed on

Question

Adjust the color of the text depending on the background it is displayed on

While practicing HTML and CSS as I normally do, I decided to work on a PSD template yesterday. Initially, it seemed straightforward, but soon I encountered the issue I'm currently facing.

Specifically, I am trying to change a specific part of text based on its background. I attempted using "mix-blend-mode", however, the outcome was not satisfactory.

Here is my objective.

As seen, the text before the center is white, while the text after the center matches the background color preceding it. Can this be achieved through CSS or perhaps JavaScript?

html css

Answer 1

Answer №1

Here is an example of how you can achieve this effect:

<style>
.container {
    display:block;
    position:relative;
    width:150px;
    height:50px;
    text-align: center;
}
.black-half div {
    background: #000;
    color: #fff;
}
.white-half div {
    background: #fff;
    color: #000;
    width:150px;
}
.white-half {
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: absolute;
}
.black-half {
    height: 100%;
    position: absolute;
}
</style>

<div class="container">
  <div class="black-half">
      <div>Split background and text color</div>
  </div>
  <div class="white-half">
      <div>Split background and text color</div>
  </div>
</div>

Answer 2

Here is an example of how you can achieve this effect:

<style>
.container {
    display:block;
    position:relative;
    width:150px;
    height:50px;
    text-align: center;
}
.black-half div {
    background: #000;
    color: #fff;
}
.white-half div {
    background: #fff;
    color: #000;
    width:150px;
}
.white-half {
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: absolute;
}
.black-half {
    height: 100%;
    position: absolute;
}
</style>

<div class="container">
  <div class="black-half">
      <div>Split background and text color</div>
  </div>
  <div class="white-half">
      <div>Split background and text color</div>
  </div>
</div>

Adjust the color of the text depending on the background it is displayed on

Answer №1

Similar questions

The image is non-adjustable to different screen sizes

Numerous Kendo windows are layered on top of each other, yet the text divisions within them remain distinct

Error: Trying to access 'MaterialModule' before it has been initialized results in an uncaught ReferenceError

Here is an example of how to transfer a value from PHP to a jQuery function in the code snippet provided

Exploring the art of manipulating HTML code using JavaScript

Merging Angular with jQuery: Organizing jQuery into a distinct file leads to the error message 'Property 'top' cannot be read because it is undefined.'

Discover the child of the delegated event div using jQuery

Inline-block display causing divs to act unpredictably

adjust the width of an element based on the size of characters within it

Error: Material-UI prop type validation failed - Please specify either `children`, `image`, `src`, or `component` prop

Update the form action URL when a specific option is selected from the dropdown menu upon clicking the submit

Jquery Menu featuring subitems aligned to the right

In IE9/10, the absolutely positioned pseudo element within a table cell does not fully overlay its parent

CSS and JavaScript Nav Menu Collapse (No Bootstrap)

Using Jquery Ajax to validate login information by submitting an HTML form

Troubleshooting CSS Animation Failure in Internet Explorer 11

Click on the header to activate the accordion link with a trigger

What is the best way to incorporate both the left and right menus with the main content

How can I prevent media controls from appearing in fullscreen mode on Microsoft Edge using CSS?

Adding several <div> elements with the correct indices