Question 244125 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0 
    <!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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search