Make overlay text of a different color, or use background to make text partly other color

Question

Make overlay text of a different color, or use background to make text partly other color

148 Views Asked by PrettyCooler At 04 September 2023 at 13:41

I would like to make the text white when it overlays some image, or to use image for changing some elements that interacts with it. In my example you can see the text is always black, but i wish to make it white (or other specific color) in part of overlaying image.

UPD: Only part that overlays image should change color. Other part must remain its original color. Also, image may be round or any random shape. Please, have a look at example EXAMPLE

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.container {
  display: flex;
  align-items: center;
}

.image {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/f/ff/Solid_blue.svg");
  width: 35vw;
  height: 35vw;
}

.text {
  position: relative;
  font-size: 7vw;
  right: 12vw;
}

<body>
  <div class="container">
    <div class="image"></div>
    <span class="text">Some cool text</span>
  </div>
</body>

I've tried to use mix-blend-mode, but I can't figure out how to make text exactly white or other specific color.

Original Q&A

There are 2 best solutions below

**mikey** · Answer 1 · 2023-09-04T14:42:37.450000

The mix-blend-mode property allows you to blend the colors of the text and the background image in different ways in CSS. To make the text white, you can use the difference value for mix-blend-mode and set the color of the text to white using the color property. Here's an example to see how it works:

CSS Code:

.text {
  position: relative;
  font-size: 7vw;
  right: 12vw;
  color: white;
  mix-blend-mode: difference;
}

This will make the text white when it overlays the blue image in your example. You can replace white with any other specific color you want.

**Bishal** · Answer 2 · 2023-09-04T17:26:41.427000

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
      }

      .container {
        display: flex;
        align-items: center;
      }

      .image {
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/f/ff/Solid_blue.svg');
        width: 35vw;
        height: 35vw;
      }

      .text {
        position: relative;
        font-size: 7vw;
        right: 12vw;
        color: rgb(68, 68, 68);
        mix-blend-mode: screen;
      }
    </style>
  </head>

  <body>
    <body>
      <div class="container">
        <div class="image"></div>
        <span class="text">Some cool text</span>
      </div>
    </body>
  </body>
</html>

you can check this, if you try to use a gray color it will look like this. you can play with the gray colour and see what fits you.

Make overlay text of a different color, or use background to make text partly other color

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in MIX-BLEND-MODE

Trending Questions

Popular # Hahtags

Popular Questions